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高的行的垂直中間。