為什麼只設定line-height就可以實現文字垂直居中效果

antzone發表於2017-03-22

在實際應用中，如果讓單行文字在元素中垂直居中，可以將元素的高度和行高值設定為相同即可。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{
  width:200px;
  height:50px;
  background:#CCC;
  line-height:50px;
  text-align:center;
}
</style>
</head>
<body>
<div>螞蟻部落softwhy.com</div>
</body>
</html>

上面的程式碼實現了我們的要求，div中的單行文字可以在div中垂直居中，使用的方式非常的簡單，將height屬性值和line-height屬性值都設定為50px即可。其實在實際應用中，完全沒有必要使用height屬性，只用line-height就可以實現此功能，程式碼修改如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{
  width:200px;
  background:#CCC;
  line-height:50px;
  text-align:center;
}
</style>
</head>
<body>
<div>螞蟻部落softwhy.com</div>
</body>
</html>

上面的程式碼雖然沒看使用height屬性，同樣可以產生一個高度，並且可以使文字垂直居中。

看上去是不是有點奇怪，其實這是非常正常的表現，這是由於line-height屬性產生的作用，下面做一下簡單介紹。

在預設狀態下，如果沒有其他因素的干擾，文字會被一個content area box包裹，它的大小有字型的大小決定，這個時候content area box的大小和line box是相同的，當設定line-height屬性之後，會有如下處理:

1.獲取半行間距：半行間距=（line-height-content area box(也就是字型的大小)）/2。

2.然後把半行間距分別放置於content area box上下兩側，這樣就獲取了line box的高度尺寸。於是只要設定行高就可以產生一個高度，並且使文字居中。

特別說明:這裡為了簡略說明，故意省略一個inline box概念，具體可以參閱line-height屬性深入介紹一章節。

相關文章