製作頁面時，line-height怎麼使用？

在製作頁面的時候，經常會遇到文字圖片需要居中的情況，這時候，只要設定下文字的line-height屬性等於包裹該文字的元素的高度即可讓文字居中顯示了，先來看看這個現象。

 1 nbsp;html> 2  3  4     <meta> 5     <title>行高</title> 6     <style> 7         .line-height-demo { 8             background-color: red; 9             height: 100px;10             font-size: 30px;11         }12     </style>13 14 15     <div>16         这是一个测试行高的文本17     </div>18 19 

預設情況下，文字頂在了div的左上角，現在設定下文字的line-height屬性

這時候可以看到文字神奇般的居中了，這是為什麼呢？要知道原因，需要弄清楚line-height這個屬性是什麼以及它所表示的含義，line-height屬性用於設定行間距，就是行與行之間的距離，一般稱為行高，更官方一點的解釋為文字行的基線間的距離，這裡有個名詞需要解釋下，我想你應該猜到了，沒錯，就是基線。那什麼又是基線呢？看看下面這張圖片

印像很深吧，就是小學學習拼音時用的四線三格，這個模板跟將要介紹的line-height原理的模板非常的類似。

根據上面的圖，可以很容易的得出以下的等價關係

行高=兩行文字之間的基準間的距離=文字頂線到文字的基線+文字的基線到文字的底線+一倍行距=文字的頂線+文字的底線+一倍行距（上面0.5倍+下面0.5倍）　　

#既然文本的上下各有0.5倍的行距，那麼我們的文字自然而然的就被夾在中間的位置了，這也說明了為什麼設置文本的行高等於包裹該文本的元素高度之後，文本就居中了。

以上是製作頁面時，line-height怎麼使用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！