如何垂直對齊文本？ （垂直對齊不工作）

Question

這裏是什麼我談論的例子中，你需要放大看問題 http://jsfiddle.net/54NEa/

<div id="top">SomeText</div> 
<div id="middle">SomeText</div> 
<div id="bottom">SomeText</div> 

div{ 
    display: inline-block; 
    background-color: red; 
    font-family: Lucida Sans Unicode,Verdana,Arial,Helvetica,sans-serif; 
    font-size: 10px; 
    line-height: 10px; 
} 
div.top {vertical-align:top;} 
div.middle {vertical-align:middle;} 
div.bottom {vertical-align:bottom} 

線路10px的，但沒有按文本」 t完全填充它，它具有額外的填充 - 在FF中，填充低於Chrome，並在Chrome中填充它，而不管垂直對齊屬性如何。這與字體有所不同，但它從來沒有完全填充它的行高，它「搖擺」。任何想法如何修正該字體相對於其行的一個位置，無論瀏覽器？我做了一個小css按鈕，我需要確保我的行高度正好是10px，文本的高度也正好是10px，所以它看起來總是一樣的。

Answer 1

您必須調整線高以適應元素。

HTML：

<div id="top"><span>SomeText</span></div> 

div{ 
    height:30px; 
    display: inline-block; 
    background-color: red; 
    font: 10px Lucida Sans Unicode,Verdana,Arial,Helvetica,sans-serif; 
} 

span{ 
    line-height:30px; 
} 

這裏有一個小提琴： http://jsfiddle.net/54NEa/1/

Answer 2

vertical-align僅適用於內聯元素。嘗試使用span而不是div，或在您的div上設置display:inline。

編輯

您還需要設置font-size和容器的line-height。在這種情況下，我使用了屍體。我也改變了顯示器inline，因爲你似乎並不需要inline-block，並用無量綱line-height

http://jsfiddle.net/78fxj/

Answer 3

您還可以設置div的顯示錶細胞。這是一個非常好的解決方案，但有時候還有其他的影響。

<div id="top">SomeText</div> 
<div id="middle">SomeText</div> 
<div id="bottom">SomeText</div> 

div{ 
    display: **table-cell**; 
    background-color: red; 
    font: 10px/10px Lucida Sans Unicode,Verdana,Arial,Helvetica,sans-serif; 
} 
div.top {vertical-align:top;} 
div.middle {vertical-align:middle;} 
div.bottom {vertical-align:bottom}