製作頁面時，line-height怎麼使用？-html教學-PHP中文網

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

PHP中文网

發布： 2017-06-21 09:59:02

原創

4002 人瀏覽過

在製作頁面的時候，經常會遇到文字圖片需要居中的情況，這時候，只要設定下文字的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屬性用於設定行間距，就是行與行之間的距離，一般稱為行高，更官方一點的解釋為文字行的基線間的距離，這裡有個名詞需要解釋下，我想你應該猜到了，沒錯，就是基線。那什麼又是基線呢？看看下面這張圖片