關(guān)于css中l(wèi)ine-height(行高)設(shè)置無(wú)效的問(wèn)題的解決方法
發(fā)布時(shí)間：2018-11-29 16:10:37 作者：Kobe_G 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了關(guān)于css中l(wèi)ine-height(行高)設(shè)置無(wú)效的問(wèn)題的解決方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
關(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>
然后在瀏覽器中打開看看效果：
我們發(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>
然后用瀏覽器打開：
字體就成功地跳到中間去啦~~~~~
總結(jié)：在用css對(duì)行高進(jìn)行設(shè)置時(shí)，line-height的屬性必須在font的下面，否則無(wú)效！
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
深入理解CSS行高line-height與文本垂直居中的原理
本文詳細(xì)介紹了CSS行高屬性line-height與文本垂直居中的原理，通過(guò)本文的介紹相信對(duì)大家以后使用line-height和設(shè)置文本垂直居中會(huì)更加熟練，有需要的可以參考借鑒。下面一2016-08-12- 下面小編就為大家?guī)?lái)一篇全面了解css行高line-height的用法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-25
CSS中的line-height行高屬性學(xué)習(xí)教程
line-height對(duì)于頁(yè)面中字體的行距等排版方面的效果至關(guān)重要,這里為大家整理了CSS中的line-height行高屬性學(xué)習(xí)教程,包括line-height的各種取值設(shè)定等方面,需要的朋友可以參2016-06-06CSS中的line-height行高屬性的使用技巧小結(jié)
這篇文章主要介紹了CSS中的line-height屬性的使用技巧,文中同時(shí)給出了line-height使用中經(jīng)常出現(xiàn)的文字重疊問(wèn)題的解決方法,需要的朋友可以參考下2016-02-02- 這篇文章主要介紹了CSS中行高line-height屬性的一些使用技巧,包括為每行文本指定不同顏色和文本中間添加線時(shí)用到的一些操作方法,需要的朋友可以參考下2015-08-21
- 本文介紹下css中的line-height屬性的用法，通過(guò)實(shí)例學(xué)習(xí)css line-height屬性的具體用法，感興趣的朋友參考下2014-08-02
- “行高“顧名思義指一行文子的高度，大家對(duì)CSS行高line-height都有自己的理解，下面為大家介紹下本人自己的理解2014-01-08
- 我們?cè)赾ss編寫中需要對(duì)大篇幅的內(nèi)容顯示的更好看，有些間隔，不要在擠在一起難看，就可以使用Line-Height屬性進(jìn)行控制2013-07-20