製作頁面時，line-height怎麼使用？
- PHP中文网原創
- 2017-06-21 09:59:023981瀏覽
在製作頁面的時候，經常會遇到文字圖片需要居中的情況，這時候，只要設定下文字的line-height屬性等於包裹該文字的元素的高度即可讓文字居中顯示了，先來看看這個現象。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>行高</title> 6 <style type="text/css"> 7 .line-height-demo { 8 background-color: red; 9 height: 100px;10 font-size: 30px;11 }12 </style>13 </head>14 <body>15 <div class="line-height-demo">16 这是一个测试行高的文本17 </div>18 </body>19 </html>
預設情況下，文字頂在了div的左上角，現在設定下文字的line-height屬性
這時候可以看到文字神奇般的居中了，這是為什麼呢？要知道原因，需要弄清楚line-height這個屬性是什麼以及它所表示的含義，line-height屬性用於設定行間距，就是行與行之間的距離，一般稱為行高，更官方一點的解釋為文字行的基線間的距離，這裡有個名詞需要解釋下，我想你應該猜到了，沒錯，就是基線。那什麼又是基線呢？看看下面這張圖片
印像很深吧，就是小學學習拼音時用的四線三格，這個模板跟將要介紹的line-height原理的模板非常的類似。
根據上面的圖，可以很容易的得出以下的等價關係
行高=兩行文字之間的基準間的距離=文字頂線到文字的基線+文字的基線到文字的底線+一倍行距=文字的頂線+文字的底線+一倍行距（上面0.5倍+下面0.5倍）
#既然文本的上下各有0.5倍的行距，那麼我們的文字自然而然的就被夾在中間的位置了，這也說明了為什麼設置文本的行高等於包裹該文本的元素高度之後，文本就居中了。
以上是製作頁面時，line-height怎麼使用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：文字溢出隱藏後添加省略號下一篇：文字溢出隱藏後添加省略號