Question

我面临的问题是文本在标签中垂直下降。此问题特别适用于Open Sans google字体。 Arial和其他字体似乎工作正常。不知道这个问题是什么。

请在这里找到jsFiddle： https://jsfiddle.net/or7nkyts/3/

第一个按钮有Open Sans，第二个按钮有Arial font-family。

感谢任何帮助。

<a  target="_blank"  href="javascript:void(0)" class="btn testClass">
    <i style="font-size: 24px; color: #fff; vertical-align: middle;" class="fa fa-address-book-o"></i>
    <span style="vertical-align: middle;">Blue Button</span>
</a>
<a  target="_blank" style="font-family: Arial;"  href="javascript:void(0)" class="btn testClass">
    <i style="font-size: 24px; color: #fff; vertical-align: middle;" class="fa fa-address-book-o"></i>
    <span style="vertical-align: middle;">Blue Button</span>
</a>

Answer 1

我认为这是因为字体是如何制作的，除了用css操作它之外你几乎无能为力。

如果您在按钮文本的span上放置边框，您会看到字体本身在顶部比在底部有更大的边距，并且它实际上与图标中间对齐。

a.testClass span {
    border: 1px solid red;
}

这是一个可能更适合您的解决方案：

https://jsfiddle.net/32cLkm5x/2/

由于font-family导致的垂直对齐问题

1 个答案: