關(guān)于css中l(wèi)ine-height(行高)設(shè)置無(wú)效的問(wèn)題
我們先寫下這一串代碼：
| <!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;/* 設(shè)置行高，讓字體居中 */ background: #333;/* 設(shè)置整個(gè)背景為黑色，便于觀察字體 */ color: red; font:700 18px simsun;/* 對(duì)字體進(jìn)行設(shè)置 */ } </style></head><body> <div class="head"> 你好，西南石油大學(xué)。 </div></body></html> |
然后在瀏覽器中打開(kāi)看看效果：
我們發(fā)現(xiàn)在垂直方向，字體并沒(méi)有在盒子的中間顯示。
然后我們把設(shè)置行高那條語(yǔ)句放在設(shè)置字體(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;/* 設(shè)置整個(gè)背景為黑色，便于觀察字體 */ color: red; font:700 18px simsun;/* 對(duì)字體進(jìn)行設(shè)置 */ line-height: 100px;/* 設(shè)置行高 */ } </style></head><body> <div class="head"> 你好，西南石油大學(xué)。 </div></body></html> |
然后用瀏覽器打開(kāi)：
字體就成功地跳到中間去啦~~~~~
總結(jié)：在用css對(duì)行高進(jìn)行設(shè)置時(shí)，line-height的屬性必須在font的下面，否則無(wú)效！
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持錯(cuò)新站長(zhǎng)站。
新聞熱點(diǎn)
疑難解答
圖片精選
