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

问题描述

因此​​，在这个简单的例子我的最终结果是：

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.

我的问题是具体为什么的line-height：50px​​的; 只会越来越有一半的方式

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

如果在小 DIV 具有的高度 100像素和我相对于它的定位，应该不是它的一半居中的一半。

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.

这特别让我为难，因为，当我中心一个div ：

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

我会用：保证金：50px​​的0 0 50像素; 来得到这样的：

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 ;)

在此先感谢！

推荐答案

简单的答案是，与行高的角色将是在该行的垂直中间，这样用100px的高度一行在文本的，从而50像素的中间

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屋！