行高如何垂直居中文本？

Question

我试图理解为什么line-heightCSS属性将文本垂直放在此按钮的中间:

.btn-order {
    width: 220px;
    height: 58px;
    font-size: 24px;
    padding: 0;
    text-align: center;
    vertical-align: middle;
    line-height: 58px;
    border: 1px solid black;
}

<div class="btn-order">Complete Order</div>

Answer 1

该line-height属性实际上是在文本的上方和下方设置29px (29 + 29 = 58)文本行,"完成订单".如果您在此下方添加了另一行文本,则会在此文本下方找到它58px.你在这里放置行高只是为了让你的文本居中.

这是一个很好的幻灯片放映,可以帮助您更好地理解这个概念... 行高

以下是使用您所谈论的代码的示例:http://jsfiddle.net/YawDF/14/

通过设置为line-height,58px您告诉浏览器在文本行的上方和下方留下一半,在每行之间创建"58px"间隙,并且在第一行之上仅创建"29px"间隙.

侧面注意:您使用的vertical-align: middle内容在您显示的代码中无用.这可以一起取出.

Answer 2

这是设计使然。如果CSS解析器（即浏览器）不知道你的文本有多高，他就无法正确垂直对齐你的文本。

请注意，属性有一个默认值line-height。