如何在不同浏览器中垂直对齐文本

Question

请注意，我已经查阅了所有与此主题相关的链接，但似乎没有一个能够帮助我解决问题。

所有建议都是如何垂直移动文本以使其对齐。但在我的情况下，它在Chrome中已经对齐，因此当我尝试为Firefox对齐文本时，它会使Chrome中的文本错位。

请在Firefox（v12）和Chrome（v19）中打开以下链接。

http://jsfiddle.net/UQ4D5/

您会注意到，在Firefox中它向上移动，但在Chrome中完美对齐。

- AppleGrew

---

从经验来看，一些情况将由渲染引擎以不同方式处理 - 特别是在具有奇数高度的元素内部的垂直对齐。好处是，在浏览器内部，相同的情况将被一致地处理，2像素的位移可能是可以忽略的。 - Oleg

Answer 1

你的CSS中有两个属性

 display: table-cell;
    vertical-align: middle;

请查看实时演示 http://jsfiddle.net/UQ4D5/5/

- Rohit Azad Malik

---

这在FF和Chrome中似乎运行良好。您能否确认它是否在IE9+中工作？ - AppleGrew

如果你要检查运行在浏览器上的任何属性，那么请访问 http://caniuse.com/ 这个网站。 - Rohit Azad Malik

看起来FF有渲染错误。请查看http://jsfiddle.net/UQ4D5/15/。请注意，当您使容器变小并且字体变大时，错误会增加。因此，我认为试图解决这个问题是徒劳的。 - AppleGrew

Answer 2

学习使用reset.css或normalize.css来防止浏览器渲染模型中的小差异。

然后使用高度=行高技巧：

div {
    font-size: 100px;
    text-align: center;
    height: 120px;
    line-height: 120px;
    border: 1px solid black;
}

Chrome指标：

Firefox指标：

两种情况下高度相同。

- Vladimir Starkov

---

在我的实际代码中，我确实使用了reset。无论如何，我在FF中尝试了您的解决方案，但仍然向上偏移。演示：http://jsfiddle.net/UQ4D5/10/ - AppleGrew

我添加了这2个浏览器的度量统计数据，它们是相同的。 - Vladimir Starkov

即使您不使用 height 和 line-height，高度仍将保持不变。在这种情况下，它使用子节点（文本节点）来确定其高度。即使高度相同，文本的垂直位置也不同。我不确定如何测量它，除非拍屏幕截图并使用比例尺。 - AppleGrew

Answer 3

这个问题基于浏览器默认样式表。我建议您使用适当的重置样式表或者normalize.css

- gearsdigital