html - Chrome 和 Firefox 的文本垂直对齐方式不同

Question

如何实现 div 中的文本在 Firefox 和 Chrome 中具有相同的 padding-top？在 Firefox 中它有一个 padding-top 在这种情况下默认为 3px 而 Chrome 只有 2px。

js fiddle

HTML

<div class="wrap">
    <div class="content">Hello World</div>
</div>

CSS

.wrap{
border: 1px solid;
background: lightblue;
height: 50px;
width: 120px;
font-family: sans-serif;
}

Answer 1

如果你想垂直对齐 div 中的文本。

引用问题得到答案Vertically align text in a div

DEMO

您的 div 中有 50px 高度。所以只需简单地为您的类(class)提供 line-height:50px; 属性。如果增加 div 的高度，则也增加行高。

如果您希望文本居中对齐，请添加text-align:center;。