爲什麼更改行高只會影響字體的頂部？

我正在使用點HTML字符來製作不同的顏色圖標。我遇到的問題是line-height屬性似乎隻影響字符頂部放置的位置。即使使用與文本的標準字體大小相匹配的行高設置，我也無法正確地將點圖標與常規文本對齊。爲什麼更改行高只會影響字體的頂部？

HTML 
<div> 
    <b>Legend:</b> 
    <span class="dotib">&#8226;</span> 
</div> 

CSS 
.dotib{font-size: 36pt; line-height: 12pt;}

有沒有更好的方式使這個點的行爲像我期望的那樣？

這裏有一個的jsfiddle與此代碼在它：http://jsfiddle.net/TzFff/

你預計子彈（「點」）出現？設置線條高度應該會影響線條框的高度，這會間接影響垂直放置。 –

爲了得到一個看起來像是意圖的大小像子彈的角色，可以考慮使用U + 25CF BLACK CIRCLE「●」（'＆＃x25cf;'）。 –

改成這樣：

.dotib { 
    font-size: 36pt; 
    line-height: 12pt; 
    vertical-align:middle; 
    padding-bottom:5px; 
}

2013-01-17 21:08:59

回答