如何垂直对齐文本？ （垂直对齐不工作）

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}