CSS - 行高度属性，它如何工作（简单） [英] CSS - Line height property, how it works (simple)

问题描述

因此，在：

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

---

我意识到这个问题可能是一个overkill，因为答案可能（可能会很简单），对不起！但我想这是更好的为什么不工作的问题;）

提前感谢！

解决方案

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

So in this simple example I have as final result:

This is a very simple question but I simply can't get my head around it.

To achieve the vertical centering of the numbers I used:

line-height:100px;

Which works great and have been doing it trial and error basis.

My question is specifically why the line-height:50px; just gets if half of the way.

If the small div has a height of 100px and I an positioning relative to it, shouldn't the half of it center it to the half.

This specially puzzles me since, when I center a div:

I would use: margin:50px 0 0 50px; to get this:

---

I realize this question might be an overkill since the answer might be (probably will be very simple), so sorry! but I guess it is better the "why doesn't this work" questions ;)

Thanks in advance!!

解决方案

The simple answer is that with line-height the character will be in the vertical middle of the line, so a line with a height of 100px has the text in the middle of, thus 50px.

这篇关于CSS - 行高度属性，它如何工作（简单）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！