html - 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
}

</p>

Answer 2

この CSS を div に配置することで、テキストを中央に垂直方向に揃えることができます。

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