行高如何垂直居中文本？答案

【问题标题】：How does line-height vertically center text?行高如何垂直居中文本？
【发布时间】：2012-01-10 05:58:06
【问题描述】：

我试图理解为什么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;
}

&lt;div class="btn-order"&gt;Complete Order&lt;/div&gt;

【问题讨论】：

因为这就是line-height 的本意？
@BoltClock line-height 是外观编辑的规则，不一定用于按钮内的垂直对齐。他在问为什么这种在按钮内居中文本的技术有效。
@Michael Rader：感谢您的澄清。
根据我在做什么，我有时会使用填充：jsfiddle.net/YawDF/19 - 考虑到您设置了宽度和高度，不知道它是否适合您的情况，但供将来参考。
"为什么我们必须在这种情况下放置行高？" - 好吧，你不需要：jsfiddle.net/YawDF/20。事实上，你的 CSS 非常死板，你很少需要像这样设置绝对宽度和高度。

标签： html css vertical-alignment

【解决方案1】：

line-height 属性实质上是在您的文本“完成订单”上方和下方设置一个 29px(29 + 29 = 58) 文本行。如果您在此下方添加了另一行文本，您将在此文本下方找到 58px。您将 line-height 放在这里只是为了让您的文本居中。

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

这是一个使用我正在谈论的代码的示例：http://jsfiddle.net/YawDF/14/

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

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

【讨论】：

vertical-align:middle 仅适用于表格是不正确的。这是一个没有表格的垂直对齐工作的简单演示：jsfiddle.net/YZUTM
@Alohci 不，迈克尔的意思是 OP 的小提琴中的垂直对齐是没用的，因为在这种情况下它不会做任何事情。垂直对齐在表格单元格中的工作方式与在其他任何地方都不同。迈克尔的措辞不是很清楚...
@MrLister - 确实。这句话充其量是误导性的。它需要某种形式的澄清。
@Alohci 如果您查看更新后的小提琴jsfiddle.net/YZUTM/7，您会发现中间不再有效。它之前工作的唯一原因是因为您将line-height 设置为您的父元素，以及text-align: center。请给我看一个 vertical-align: middle; 在不使用表格的情况下工作的实例。谢谢。
@Alohci 更正...如果没有添加您使用的 CSS，您的对齐方式都无法正常工作。去掉垂直对齐，你会得到同样的效果。 jsfiddle.net/YZUTM/15

【解决方案2】：

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

注意line-height 属性的默认值。

【讨论】：

【解决方案3】：

line-height 定义了使段落看起来整洁的文本高度，因此当您增加行高时，垂直对齐相对于行高起作用，它会增加高度，您可以更清楚地看到垂直对齐的效果-文字对齐

把它当作我们孩子在幼儿园学习英语写作的笔记本

【讨论】：

它没有。它定义了文本所在的行内框的高度，而不是文本本身的高度。
对不起我的英语不好，但我也是这个意思

【解决方案4】：

The text you generate is inside its own line box 和垂直对齐用于放置在该框内。但是，该框与您包裹在文本周围的 div 无关。您将 div 的高度设置为 58px，但这不会影响行文本框的高度。这就是为什么你需要 line-height 来匹配 div 的高度。

【讨论】：

"...放置在那个框内"。不完全的。 vertical-align 用于在行框内放置行内框，每个行内框跨越。严格来说，CSS 2.1 says "在内容由内联元素组成的块容器元素上，'line-height' 指定元素内行框的最小高度。
@Alohci - 你读错了。您引用的是块级元素内的行框。我严格来说是指线框本身。
您的回答是关于内嵌框而不是行框。您的评论谈到了线框。它们是非常不同的东西。你需要更清楚你指的是哪个。

【解决方案5】：

每当一个段落被插入到一个分区中时，第一行和 div 顶部边框之间的距离是行高的一半，即如果默认行高是 1px，那么第一行和顶部之间的距离- div的边框为0.5px。

如果你有一个 height:58px 的分割线和 div 的上边界之间的距离是 29px 并且线和底部 div 的边界之间的距离是=（总 div 高度-距离 b /w 线和上边框），即 58px-29px=29px。这导致线在中心垂直对齐。

此外，如果您使用 line-height 居中对齐文本，则无需使用 vertical align:middle（用于不超过一行的文本）。

【讨论】：