字体居中css-css属性line-height的应用——单行文字上下居中

bendan520 css

2023-08-29 0 8,684 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

line-height属性是一个非常常用的css属性，可以用来设置文本的列宽，不允许使用负值。 line-height属性可用的属性值1.line-height：正常

默认值。默认情况下，文本将具有合理的线宽。

2.行高：数字

该属性值可以是数字，与字体大小的值即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：长度

您可以设置特定的固定值（包括数值和单位）作为列宽。

例子

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

图2 - 可以直接设置具体的列宽

4.行高：x%

您可以根据当前字体大小设置一个比例作为列宽字体居中css，具体用法请参见示例。

例子

<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-再次测试字体居中css，结果与图3相同

5.line-height：继承

从父元素继承此属性。当父元素的属性值为缩放比例列时，子元素将继承缩放比例列而不是具体值。

注意：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>