Question

我有相当大的文字（字体大小28）我试图在固定高度的容器中垂直对齐。

我是通过眼睛做这个，只是设置一个边缘顶部，以便它到达正确的位置。但是，在Firefox中，我需要一个20px的上限，在Safari中我需要15px（否则它太过分了）。我发现差异是因为在Safari中文本元素比Firefox高，并且在Firefox上包含少量的空白，而这些空白在Firefox中没有显示（在Firefox中，文本元素的顶部恰好是文本开始时）。

我已经尝试了所有类型的显示组合，其中包含行高，或者可能为文本添加宽度/高度等等。什么都行不通。

我能做些什么才能保持这种一致性？我讨厌使用JS，但它似乎是唯一的选择......

Answer 1

对于跨浏览器的CSS规范化我建议重置--YUI3有一个好的，Twitter Bootstrap是另一个好的。它基本上将填充和边距设置为0，因此所有浏览器都会表现出来并且只遵循您的css规则而不是它们自己的默认规则。

要将文本垂直对齐到容器，如果它是单行文本，请使用line-height属性，并将其设置为等于容器的高度。

例如：

CSS：

div {
    height:300px;
    width: 400px;
    line-height: 300px;
    font-size:28px;
    background-color:#F0F0F0;
}

<强> HTML：

<div>
   Some vertically centered text
</div>

示例：http://jsfiddle.net/Djvv7/

Answer 2

您需要应用css重置。在所有项目中使用一个的好习惯。我所知道的最着名的是：http://meyerweb.com/eric/tools/css/reset/

webkit vs firefox文本高度

2 个答案: