html - 垂直居中 Helvetica Neue

Question

我在垂直居中 Helvetica Neue 字体时遇到问题。我使用了三种不同的流行方法(行高等于容器、表格单元格、填充)这似乎适用于许多其他字体，但 Helvetica Neue 似乎比其他字体高。我在这里放了一个例子:

Font Examples

其他人是否遇到同样的问题？或者有人可以指出我做错了什么吗？

Answer 1

我认为您希望字体基于 x 高度(字符 x 的高度)而不是字体的整个高度垂直居中。根据字体以及字体大小与其容器相比的接近程度，这种差异变得很明显。参见 Vertical alignment based on x-height关于如何以最佳方式实现这一目标的问题。

我的首选方法是使用 :after 伪选择器添加一个与其父级一样高的空容器，并使用 vertical-align: middle 使其垂直居中基于 x 高度。

.xheight {
    font-size: 40px;
    text-align: center;
}

.xheight:after {
    content: '';
    line-height: 50px;
    vertical-align: middle;
}