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

Question

请注意，我已经浏览了这个主题的现有链接，但似乎没有任何帮助。

所有提示了一种如何垂直移动文本以使其看起来对齐的方法。在我的情况下，问题是它已经在Chrome中对齐，所以当我尝试对齐Firefox的文本时，它会使Chrome中的文字不对齐。

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

  

http://jsfiddle.net/UQ4D5/

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

Answer 1

css中的两个属性

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

检查直播演示http://jsfiddle.net/UQ4D5/5/

Answer 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指标：

两种情况下的身高都相同。

Answer 3

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