CSS行高（line-height）及文本垂直居中原理

時間 2019-11-08

標籤 css line height 文本垂直居中原理欄目 CSS 简体版

原文原文鏈接

在CSS中，line-height 屬性設置兩段段文本之間的距離，也就是行高，若是咱們把一段文本的line-height設置爲父容器的高度就能夠實現文本垂直居中了，好比下面的例子：css

<!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>Document</title>
       <style>
       div {
           width: 300px;
           height: 200px;
           border: 1px solid red;
       }
       span {
           line-height: 200px;
       }
      </style>
</head>
<body>
   <div>
       <span>文本垂直居中原理</span>
   </div>
</body>
</html>

這樣，span標籤中的文字就相對於div垂直方向居中了，想要文本水平居中設置text-align：center便可。html

那麼，它怎麼就垂直居中了？爲了弄清楚它，下面咱們先來看幾個概念。瀏覽器

1. 行框

在瀏覽器中，會將給每一段文本生成一個行框，行框的高度就是行高。行框由上間距、文本高度、下間距組成，上間距的距離與下間距的距離是相等的。字體

默認狀況下一行文本的行高分爲：上間距，文本的高度，下間距，而且上間距是等於下間距的，因此文字默認在這一行中是垂直居中的。spa

2. 文本中的幾條線

幾條線與行高的關係圖解：3d

文本的行高也能夠當作是基線到基線的距離。code

若是一段文本的高度爲16px，若是給他設置line-height的高度爲200，那麼至關於，文本的上下間距的高度增長了，可是文本自己的高度依然是16是不變的，而且一直默認在行框中垂直居中，而上間距和下間距平分了200px的高度而且減去文本自己的高度。因此，容器被這一行文本佔滿，而自己文字在本身的一行中是垂直居中的，因此看起來就像是在容器中垂直居中。htm

3. Chrome瀏覽器的默認值

谷歌瀏覽器字體的默認大小是：16px，字體的最小值爲：12px，默認行高爲：18px；默認狀況下若是沒有給div設置高度，那麼這個div的高度會比其中文本的大小大一點（這個大多少如今沒有辦法肯定）blog

4. 行高的單位

px(像素)
設置起來是最直接的，同時也最方便的。繼承

%(百分號)
若是line-height單位設置爲%，那麼未來在計算的時候，基數是當前標籤中的文本的字體的大小。
若是是%,%以前的數據必定是整數：150% ，200%

em
效果跟%是同樣同樣的。
注意：一行em的大小至關因而當前標籤中的font-size的大小。
若是是em,em以前的數據必定是：1.2em ,1.5em ,2em

不帶單位
若是不涉及到繼承，那麼帶不帶單位（em）都是同樣的效果，可是若是涉及到繼承的話，那麼就有很大的區別了：

若是單位是em，那麼未來在繼承的時候，咱們的瀏覽器會先將行高對應的具體的數值計算出來之後再繼承。
若是沒有單位，那麼未來在繼承的時候，咱們的瀏覽器會先將line-height這個屬性繼承給子元素，再在子元素的font-size來計算。line-height: 1.5;

5. 行高能夠被繼承

咱們知道，CSS的三大特性是繼承、層疊、優先級。line-height也是能夠被繼承的，以下面的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    span {
        display: inline-block;
    }
    </style>
</head>
<body>
    <div>
        <span>中國人</span>
    </div>
</body>
</html>

在不給div設置行高的狀況下，span標籤的文字行高默認爲18

接着咱們給div設置一個行高等於20px

div {
    line-height: 20px;
}
span {
    display: inline-block;
}

咱們再來看看span標籤的的變化

並且，無論咱們給行高設置什麼單位（px、%、em、不帶單位）均可以被繼承。

6. 行高計算的基數

若是行高的單位不是px，那麼未來行高要進行計算：這個計算須要一個基數，這個基數是當前標籤的字體大小，而不是瀏覽器默認字體大小。以上面的例子爲例，咱們並無設置任何字體大小，此時咱們把line-height設置爲150%，那麼文字行高將變爲24px（16px*1.5=24）。

div {
       line-height: 150%;
}

效果以下

此時咱們在給div設置一個font-size等於20px：

div {
   line-height: 150%;
   font-size:20px;
}

那麼文字行高將會變成30px，20px*1.5=30px;

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。