html - 使用 opensans 字体 - 文本未垂直居中

Question

.parent{
display:inline-block;
border:2px solid #555;
padding:0 14px;
line-height:25px;
font-family:'Open Sans';
}

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

<div class='parent'>LOREM IPSUM</div>

使用 OpenSans 文本 LOREM IPSUM 没有垂直居中。我认为是两个像素凸起。

有什么帮助吗？

Answer 1

原因

浏览器中的默认字体大小是 16px。

用字体大小减去行高:25px - 16px = 9px这是一个奇数，将分为 5px 和 4px。这就是一侧大 1 像素的原因。

修复

使用 em 而不是 px:

line-height: 1.5em;

您还可以将行高设置为高 1 像素 (26px) 或在顶部添加 1px 内边距，但我认为这不是正确的解决方案。