關于css中line-height(行高)設置無效的問題
我們先寫下這一串代碼：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .head{ height: 100px; text-align: center; line-height: 100px;/* 設置行高，讓字體居中 */ background: #333;/* 設置整個背景為黑色，便于觀察字體 */ color: red; font:700 18px simsun;/* 對字體進行設置 */ } </style></head><body> <div class="head"> 你好，西南石油大學。 </div></body></html>然后在瀏覽器中打開看看效果：
我們發現在垂直方向，字體并沒有在盒子的中間顯示。
然后我們把設置行高那條語句放在設置字體(font)的下面：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .head{ height: 100px; text-align: center; background: #333;/* 設置整個背景為黑色，便于觀察字體 */ color: red; font:700 18px simsun;/* 對字體進行設置 */ line-height: 100px;/* 設置行高 */ } </style></head><body> <div class="head"> 你好，西南石油大學。 </div></body></html>然后用瀏覽器打開：
字體就成功地跳到中間去啦~~~~~
總結：在用css對行高進行設置時，line-height的屬性必須在font的下面，否則無效！
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
