溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關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的下面，否則無效！
感謝各位的閱讀！關于“css中line-height設置無效怎么辦”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
