css屬性line-height的應用——單行文字上下居中

阿新 • • 發佈：2021-02-04

line-height屬性的可用屬性值

1.line-height: normal

預設值。文字會預設有一個合理的行間距。

2.line-height: number

屬性值可以是一個數字，該數字與字型尺寸即font-size的值相乘作為行高。
示例

<body>
<p>這裡是一句用於測試的文字。</p>
<style>
    body,p{
        margin: 0;
        padding: 0;
    }
    p{
        font-size: 16px;
        line-height: 2;
    }
</style>
</body>

在這裡插入圖片描述
圖1-可以看見最終p元素的行高為32px

3.line-height: length

可以設定一個具體固定的值（包含數值和單位）作為行高。

示例

<style>
    body,p{
        margin: 0;
        padding: 0;
    }
    p{
        font-size: 16px;
        line-height: 28px;
    }
</style>

在這裡插入圖片描述
圖2-可以直接設定具體的行高

4.line-height: x%

可以設定基於當前字型尺寸的百分比作為行高，具體使用可看示例。
示例

<style>
    body,p{
        margin: 0;
        padding: 0;
    }
    p{
        font-size 
: 20px;
        line-height: 90%;
    }
</style>

在這裡插入圖片描述
圖3-可以看出文字的行高等於font-size屬性的值乘以90%

<style>
    body,p{
        margin: 0;
        padding: 0;
    }
    p{
        font-size: 20px;
        line-height: 110%;
    }
</style>

在這裡插入圖片描述
圖4-再次測試，結果同圖3

5.line-height: inherit

從父元素繼承該屬性，當父元素的該屬性值是一個縮放比例時，子元素將繼承該縮放比例而不是具體的數值。
注意： IE瀏覽器不支援該屬性值。
示例

<body>
    <div>
        這是父元素內的文字內容。
        <p>這是子元素內的文字內容。</p>
    </div>
<style>
    body,div,p{
        margin: 0;
        padding: 0;
    }
    div{
        font-size: 16px;
        line-height: 2;
    }
    p{
        font-size: 20px;
        line-height: inherit;
    }
</style>
</body>

在這裡插入圖片描述
圖5-子元素的行高是子元素font-size屬性值和從父元素上繼承的line-height屬性值相乘得出的計算結果

圖6-整個div的高度是父元素行高（16px*2=32px）加上子元素行高得出的計算結果，等於72px

應用場景

單行文字上下居中

想要讓單行文字上下居中顯示，只需設定元素的line-height屬性值和height屬性相等即可。
示例

<body>
<p>這裡是一句用於測試的文字。</p>
<style>
    body,p{
        margin: 0;
        padding: 0;
    }
    p{
        background-color: #999999;
        font-size: 16px;
        height: 50px;
    }
</style>
</body>

在這裡插入圖片描述
圖7-未設定line-height時文字的顯示情況

<body>
<p>這裡是一句用於測試的文字。</p>
<style>
    body,p{
        margin: 0;
        padding: 0;
    }
    p{
        background-color: #999999;
        font-size: 16px;
        height: 50px;
        line-height: 50px;
    }
</style>
</body>