如何跨浏览器垂直对齐文本答案

【问题标题】：How to vertically align text across browsers如何跨浏览器垂直对齐文本
【发布时间】：2012-05-29 05:29:02
【问题描述】：

请注意，我已经浏览过有关该主题的现有链接，但似乎对我的情况没有帮助。

所有人都建议了一种如何垂直移动文本以使其看起来对齐的方法。我的问题是它已经在 Chrome 中对齐，所以当我尝试为 Firefox 对齐文本时，它会在 Chrome 中对齐文本。

请在 Firefox (v12) 和 Chrome (v19) 中打开以下链接。

http://jsfiddle.net/UQ4D5/

您会注意到它在 Firefox 中向顶部移动，但在 Chrome 中完全对齐。

【问题讨论】：

根据经验，渲染引擎会以不同方式处理某些场景 - 特别是在奇数高度的元素内垂直对齐。从好的方面来说，相同的场景将在浏览器内得到一致处理，并且 2px 位移可能可以忽略不计

【解决方案1】：

你的 css 中有两个属性

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

【讨论】：

【解决方案2】：

学习使用reset.css 或normalize.css 来防止浏览器渲染模型出现细微差异。

然后使用height=line-height技巧：

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

chrome 指标：

firefox 指标：

两种情况下的高度相同。

【讨论】：

在我的实际代码中，我确实在使用重置。无论如何，我厌倦了你在 FF 中的解决方案，它仍然向上移动。演示：jsfiddle.net/UQ4D5/10
我添加了这 2 个浏览器的指标统计信息，它们彼此相同
即使您不使用height 和line-height，高度仍将保持不变。在这种情况下，它使用子节点（文本节点）来确定其高度。即使高度相同，文本的垂直位置也不相同。除了截屏和使用比例尺外，我不知道如何测量。

【解决方案3】：

该问题基于浏览器默认样式表。我建议您使用正确的reset Stylesheet 甚至normalize.css

【讨论】：