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