垂直中心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; 
}