CSS-行高属性，它如何工作（简单）

Question

因此，在这个简单的示例中，我得到了最终结果：

这是一个非常简单的问题，但我根本无法解决。

要实现我使用的数字的垂直居中：

line-height:100px;

哪个效果很好，并一直在做反复试验的基础。

我的问题特别是为什么line-height:50px; 只是获得一半。

如果small div的高度为100px并且我的位置相对于它，则不应将其一半居中。

因为当我居中div时 ，这特别使我感到困惑：

我将使用： margin:50px 0 0 50px; 得到这个：

---

我知道这个问题可能是一个矫kill过正的问题，因为答案可能是（可能非常简单），非常抱歉！ 但我想最好是“为什么不行”的问题;）

提前致谢！！

Answer 1

简单的答案是，使用line-height时，字符将位于行的垂直中间，因此，高度为100px的行的文本位于中间，因此为50px。

Answer 2

好的，我很确定我现在明白了，我会回答我自己的问题，感谢大家的回答，这将是一个更加图形化的解释（它总是对我有帮助）：

这只是对jarret答案的补充（第一个将它钉牢的恕我直言）

感谢所有有用的答案

顺便说一句：对不起的艺术品。

Answer 3

我认为line-height就是听起来的样子。 如果仅是高度的一半，则将有所不同，因为您必须考虑font-size等line-height只是使块状的东西具有100px的高度（在您的情况下），并将文本居中那。

基本上， line-height在文本的顶部和底部添加值((desired height) - (font-size)) / 2 ，而添加边距并不说明这一点。

Answer 4

使用line-height属性设置为100px意味着文本将垂直放置在高度为100px的行中间。 这意味着它将放置在50px左右。 将边距设置为50px将为您提供类似的结果，但您可能会注意到其位置不完全居中。

Answer 5

本质上，行高有助于设置“领先”和“一半领先”。 100像素占元素的总高度，并且文本在该区域内“垂直对齐”。 一半在上面，一半在下面。

这比我解释得更好。http://www.w3.org/TR/CSS2/visudet.html#line-height

Answer 6

已经回答了，但是我想我可以补充一下，公式通常是：

行高和字体大小之间的差异称为行距。 然后将此Leading除以2得到一半的Leads，它位于文本的上方和下方，从而使其垂直居中。

下面的幻灯片将对行高进行很多说明。 您可以从幻灯片72开始，以获得上面我所解释的内容，但是我建议您仔细阅读整个内容。

Answer 7

这行不通，因为line-height特定于文本，而不特定于div等元素的实际高度。 当您的主题实际上不是文本时，我建议您使用高度而不是行高。

Answer 8

当您将元素的行高设置为100％时（在您的示例中，这等于100px），文本将被放置在100px高的行的垂直中间。