關(guān)于css中l(wèi)ine-height(行高)設(shè)置無效的問題的解決方法

2024-07-11 08:59:41

字體：大中小

供稿：網(wǎng)友

關(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">		你好，西南石油大學。	</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">		你好，西南石油大學。	</div></body></html>

然后用瀏覽器打開：