Question

我正在使用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';
 }

这就是它的样子：

This is how it looks like

这就是它应该是这样的：

And this is how it SHOULD look like

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

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

编辑＃2：这是字体的问题。 Segoe UI似乎有一个奇怪的基线。当使用Arial，Verdana或任何垂直对齐更合适时（但它也不完美）。 - ＆GT; http://jsfiddle.net/KFxG3/22/

Answer 1

每个浏览器都支持不同类型的文件格式，因此有时浏览器无法按预期呈现字体属性，并且会出现行高问题。

对于付费字体，请始终将所有字体扩展名文件添加到fonts / vendors文件夹中，并使用以下格式在样式表中添加字体。

font-face格式：

       @font-face {
         font-family: 'MyWeb';
         src: url('webfont.eot'); /* IE9 Compat Modes */
         src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
         url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
         url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

有关详细信息，请参阅以下链接： the docs

Answer 2

JSFiddle!

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

然后你可以通过应用填充来补偿差异。

padding-bottom: 5px;

Answer 3

这不是答案，这只是评论（我不能评论，因为我的声誉还不够）。

一年过去了，但问题仍然存在...希望，有一天我们会找到答案。

我尝试对此进行一点调查。这是jsfiddle，其原始问题已更新：link。

我添加了4条水平线以了解字体尺寸：顶部，中间，底部，基线：

<div>
  qb - Some text - qb
  <span class="top"></span>
  <span class="mid"></span>
  <span class="bot"></span>
  <span class="base"></span>
</div>

div {
    background-color: #9F9;
    height: 22px;
    line-height: 22px;
    font-size: 20px;
    font-family: 'Verdana', 'Arial';
}
span {
  display: inline-block;
  width: 10px;
  height: 1px;
  background: red;
}
span.mid {
  vertical-align: middle;
}
span.top {
  vertical-align: top;
}
span.bot {
  vertical-align: bottom;
}
span.base {
  vertical-align: baseline;
}

因此，我们可以看到Chrome / Win10和FireFox / Ubuntu之间的区别：

在Ubuntu中，我有一些基线（和中间行）用于某些字体，比Windows字体高1px。

根据其他答案（并根据我的经验），我可以说：

padding将无济于事
vertical-align:middle将无济于事
将原始div更改为display:flex;justify-content:center（用span或div包裹内部文本）将无济于事
将原始的div更改为display:table（将内部文本包裹在display:table-cell中）
将外部div更改为span不会有帮助
box-sizing将无济于事

我已经检查了以上所有选项，但它们不起作用：与Windows相比，Ubuntu中的文本总是高1px。

也许会帮助某人。

Answer 4

您想要添加/更改line-height。

要让q和b位于中间位置，请使用line-height:16px;，但some text会显得狡猾。与16px;混在一起，你可能会找到你想要的东西。

示例：

div{
    line-height:16px;
}

Answer 5

您可以将文字部分包装到另一个<div>中，并可以display:table

尝试display:table-cell和verical-align:middle方法

虽然这与你的要求有所不同，但我认为你应该这样练习：

从父

中完全删除行高

<强> HTML

<div class="container"><div class="content">qb - Some text - qb</div></div>

<强> CSS

.container {
    background-color: green;
    height: 55px;
    display:table; // here it is
    font-size: 20px;
    font-family: 'Segoe UI', 'Verdana', 'Arial';
}
.content{
    display:table-cell; // here it is
    vertical-align:middle;
}

Fiddle Example

Answer 6

在这种情况下，

div对你来说是错误的元素。试试这个并比较：

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

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

和

<span>qb - Some text - qb|ÜÄÖ</span>
<br><br>
<div>qb - Some text - qb|ÜÄÖ</div>

Answer 7

浏览器表现正常。你可能会感到困惑，因为你的字体大小，20px小于你的行高，22px，它似乎适合它。但它不会。

例如，将H1的字体大小设置为24px会产生39px的行高。 12px字体大小将导致18px行高。

Answer 8

尝试在代码中添加填充。

示例：

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

Answer 9

我想这就是你要找的东西： http://jsfiddle.net/KFxG3/19/

您需要在CSS中添加以下行。

 padding-bottom:5px;

然而，这不是行高“应该”工作的方式。据我所知，像p和q这样的字母的底部不被认为是字体的中间高度值。你必须用大写字母来衡量才能获得相当准确的结果。

顺便说一句，你不需要div高度，除非你对外面元素的高度有所帮助。

我建议你也研究一下“盒子大小”。防止衬垫元件扩展到外部尺寸。

此外，使用旧版浏览器衡量正确和错误的做事方式可能不是最安全的方法来得出任何与CSS相关的结论。

Answer 10

这就像是迟了4年，但有时你必须检查盒子大小是否正确。

a{
  box-sizing: content-box
}

然后你的行高和高度应该是文本的中心。

Answer 11

我知道我可能会迟到一点，但是迟到总比不到好。是的，您是对的-这是您的字体的问题，在您的情况下是上升。

要解决此问题，您需要更改错字的升序（在某些其他情况下为降序）。

Mac用户的一种解决方案：
“要用字体编辑这些字体，您需要下载Apple Font Tool Suite。安装后，您需要打开Terminal并导航到包含字体的目录。之后，输入以下命令：

ftxdumperfuser -t hhea -A d font.ttf

这将创建一个名为font.hhea.xml的文件，将此新文件打开到文本编辑器中，并调整ascender和deconder的值。通常，如果您将字体设置得太低，则需要减少升序和增加降序。编辑并保存后，在终端中输入以下命令来重构您的Font文件：

ftxdumperfuser -t hhea -A f font.ttf

您现在可以在应用程序中使用font.ttf文件。如果字体仍然不合适，请重复上述步骤，直到感到满意为止。“ -来源：Andy Yardley

Answer 12

您可以将特定高度应用于div和line-height ..您不需要其中任何一个将文本居中垂直。

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

示例：http://jsfiddle.net/KFxG3/2/

Answer 13

vertical-align: middle;
padding-bottom:5px;

你必须在你的CSS中添加

Answer 14

这是更新的小提琴http://jsfiddle.net/KFxG3/16/

您需要删除height元素。 div根据字体大小计算高度。

CSS

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

文本不是垂直居中的

14 个答案: