html - 行高如何垂直居中文本？

Question

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

.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。您在此处放置行高只是为了让您的文本居中。

这是一个很好的幻灯片，可以帮助您更多地理解这个概念... line-height

这是一个使用您的代码的示例:http://jsfiddle.net/YawDF/14/

通过将 line-height 设置为 58px，您是在告诉浏览器在文本行的上方和下方留出一半，在每行之间创建一个“58px”的间隙并且第一行上方只有“29px”的间隙。

旁注:您对 vertical-align: middle 的使用在您显示的代码中毫无用处。这个可以一起拿出来。