CSS - 如何对齐不同的字体大小？

Question

我有一个小问题，一些CSS - >Example on jsFiddle

简单的按钮：

<button type="reset" id="reset-btn">Reset</button> 

CSS规则：

button#reset-btn:after{ 
    content:" <<"; 
    font-size:2em; 
} 

正如你可以看到 “< <” 被打通产生CSS。有没有办法将这两种不同的字体大小对齐，以使较大的“< <”旁边的文本位于按钮的垂直中心？

在此先感谢！

Answer 1

裹span标签内，然后将文本样式vertical-align: middle同时适用于button和span

HTML

<button type="reset" id="reset-btn"><span id="reset-text">Reset</span></button> 

CSS

button#reset-btn:after{ 
    content:" <<"; 
    font-size:2em; 
    vertical-align: middle; 
} 

#reset-text{ 
    vertical-align:middle; 
} 

工作实例：http://jsfiddle.net/Eh8TB/3/

Answer 2

添加vertical-align属性：

button#reset-btn:after { 
content:" <<"; 
font-size:2em; 
vertical-align: middle; 
} 

Answer 3

你可以试试...

button#reset-btn:after, button#reset-btn{ 
font-size:1em; 

}

添加您的JS提琴CSS下。

Answer 4

我只想给内容的位置：

button#reset-btn:after{ 
    content:" <<"; 
    font-size:2em; 
    position: relative; 
    top: 2px; 
}