使用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。这就是为什么一侧大1px。

FIX

使用 em 代替 px ：

line-height: 1.5em;

您还可以将行高设置为高1个像素（26像素）或在顶部添加1像素的填充，但是我认为这不是合适的解决方案。