html - 如何保持垂直对齐文本在中间独立于字体系列和字体大小？

Question

我想要一个垂直集中的文本。

但问题是：当我增加 时font-size，不同的浏览器呈现不同的字体系列（字体堆栈）并且它不保持中间对齐。

http://jsfiddle.net/rpNnh/1/

谢谢！

Answer 1

在jsfiddle中查看解决方案

详细地

html代码

<div>
<p>text+<br>sdffd</p>
</div>
<br/><br/>
<a href="#" class="switchFont">Switch Font</a>​

CSS

div{
    width: 200px;
    height: 200px;
    border: 1px solid black;
    display: table; //added
}
p{
    line-height: 20px; //changed
    font-size: 18px;
    text-align: center;
    display: table-cell; //added
    vertical-align: middle; //added
}

p.times{
    font-family: "verdana"; //changed
}

​</p>

Answer 2

您可以通过将此 CSS 放在 div 上来垂直对齐中间的文本：

text-align: center;
display: table-cell;
vertical-align: middle;