如何保持垂直对齐文本在中间独立于font-family和font-size？

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
}

Answer 2

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

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