html – 文本不是垂直居中的

我正在使用line-height属性将一些文本与菜单中的图标对齐.我创建了一个简化版本(没有图标)来说明我的问题.这似乎是字体的一般垂直对齐的问题.

你可以在jsfiddle：http://jsfiddle.net/KFxG3/1/上看到这个问题

代码非常简单：

<div>qb - Some text - qb</div>

添加样式：

div {
     background-color: green;
     height: 22px;
     line-height: 22px;
     font-size: 20px;
     font-family: 'Segoe UI','Verdana','Arial';
 }

这是它的样子：

这就是它应该是这样的：

为什么在新的浏览器中会发生这种情况？我在Firefox 27.0的Windows 8.1 64位上测试过它.

编辑：我想知道,为什么浏览器无法正确呈现.当应用与容器一样高的行高时,像’a’这样的小写字母应该在’green’的顶部和底部获得相同的空格.但渲染是错误的.

编辑#2：这是字体的问题. Segoe UI似乎有一个奇怪的基线.当使用Arial,Verdana或任何垂直对齐更适合(但它也不完美). – > http://jsfiddle.net/KFxG3/22/

解决方法

JSFiddle!

记住,如果你设置一个固定的高度,并调整字体大小,行高,那么它一定是凌乱的.您可以将其设置为浮动并移除高度并让它占据所需的高度或手动设置更大的高度,但仍然使用不同浏览器的不同渲染技术会使您难以保持相同的浏览器浏览量.所以我建议我在JSfiddle中使用的方法..

然后,您可以通过应用填充来补偿差异.

padding-bottom: 5px;