如何使用行高（line-height）使文本垂直居中？

Question

如何使用行高（line-height）使文本垂直居中？

24

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

- user1069475

因为这就是 line-height 的作用？ - BoltClock

8

line-height是外观编辑的一项规则，不一定用于在按钮内垂直对齐文本。他想知道将文本居中在按钮内的这种技巧为什么有效。 - Michael Rader

根据我的需求，有时我会使用padding：http://jsfiddle.net/YawDF/19/ - 不知道它是否适用于您的情况，因为您已经设置了宽度和高度，但供以后参考。 - Joonas

为什么我们必须在这种情况下添加行高？- 好吧，你其实不需要它：http://jsfiddle.net/YawDF/20/。事实上，你的CSS非常严格，你很少需要像那样设置绝对宽度和高度。 - Wesley Murch

5个回答

0

每当在一个 division 中插入一个段落时，第一行和 div 的顶部边距之间的距离是行高的一半，即如果默认行高为 1 像素，则第一行与 div 的顶部边界之间的距离为 0.5 像素。

如果您有一个高度为 58px 的 division，则行与 div 的顶部边框之间的距离为 29px，底部 div 的边框与行之间的距离为（总 div 高度-行与顶部边框之间的距离）即 58px-29px=29px。这导致该行垂直居中对齐。

此外，如果使用行高来使文本垂直居中对齐，则无需使用 vertical align:middle（适用于不超过一行的文本）。

- aditya

0

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

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

- Raptor

0

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

将其视为我们孩子在幼儿班学习英语写作时使用的笔记本。

- Bipin Chandra Tripathi

1

它并不是定义文本本身的高度，而是定义文本所在的内联框的高度。 - Rob

抱歉我的英语不好，但我也是这个意思。 - Bipin Chandra Tripathi

0

你生成的文本位于自己的行框中，并且vertical-align用于在该框内进行定位。然而，该框与您包装文本的div无关。您将div的高度设置为58px，但这不会影响行文本框的高度。这就是为什么您需要将行高与div的高度匹配。

- Rob

1

“...放置在那个框内。”不完全正确。vertical-align用于将内联框放置在每个内联框跨越的行框中。严格来说，CSS 2.1规范指出：“对于内容由内联级元素组成的块容器元素，'line-height'指定了元素内行框的最小高度。” - Alohci

@Alohci - 你误读了那个。你引用的是块级元素内部的行框。我严格地说是关于行框本身的。 - Rob

1

你的回答提到了“内联盒子”而不是“行盒子”。你的评论谈到了行盒子。它们是非常不同的东西。你需要更清楚地表明你所指的是哪一个。 - Alohci

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael Rader · Accepted Answer

line-height属性基本上是在您的文本“完成订单”上下设置了一个29px (29 + 29 = 58)的文本行。如果您在此下面添加另一行文本，则会发现该文本在此文本下方58px。您只是将line-height放在这里以使文本居中。

这是一个很好的幻灯片，可以帮助您更好地理解这个概念...line-height 这是使用您的代码的示例，我正在讲述的内容：http://jsfiddle.net/YawDF/14/ 通过将line-height设置为58px，您告诉浏览器在文本行上方和下方各留下一半，从而在每行之间创建“58px”的间隙，并且在第一行上方只有“29px”的间隙。 顺便说一句：您在所展示的代码中使用的vertical-align: middle是无用的。这完全可以省略。