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; 
}