具有可变字体大小的文本的垂直居中

Question

我想在p元素中垂直居中，文本具有灵活的高度（它可以是多行并且具有可变的字体大小）。所以我给出相同的顶部和底部填充：

padding: 4px 0;

但是随着字体大小的增加，它会向下移动一点，所以我必须设置更大的填充底部：

.big{
    font-size: 100px;
    padding-bottom: 14px; 
}

如何使两个案件的中心垂直？
http://jsfiddle.net/uVsLn/1/

Answer 1

正如@DhirajShah在OP问题的评论中提到的那样，默认情况下两个文本实际上是垂直居中的，只是浏览器在渲染垂直居中的文本时似乎没有考虑descenders (the bottom part of the g which extends to under the baseline)，这导致了单词'big'查看偏离中心in your fiddle并删除添加的填充。

为了证明这一点你应该看看this version of your fiddle，我所做的就是删除较大尺寸段落上的额外填充，并将'small'改为< EM> '大'。现在，'big'这个词的小版本也不会垂直居中。

您可以选择是否希望文本垂直居中包括或排除下降器。

如果您选择垂直居中 除了下降器 ，只需删除所有段落底部的所有添加的填充，您就完成了，因为这是默认设置行为。现在，如果文本具有下伸，则文本将不会垂直居中。

如果你真的想让文字 垂直居中，包括下意器 ，你可能最好在所有段落中添加padding-bottom: 0.1em;之类的东西，这个将在每个段落下添加一些额外的填充。 em单位是此处as it ensures the size of the added padding varies based on the specified font-size的最佳选择。这种方法的缺点是，如果没有下行符（例如，未使用g,y,p or q，设置uppercase或使用全部大写字体时，文本将不会垂直居中显示） ）。

这是一个 jsFiddle ，展示后一种选择。