垂直中心Helvetica Neue

Question

我在垂直居中字体Helvetica Neue时遇到了问题。我已经使用了三种不同的流行方法（line-height等于容器，表格单元格，填充），这似乎适用于许多其他字体，但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; 
}