vertical-align之text-bottom与text-top解惑

最新推荐文章于 2024-08-21 16:13:13 发布

.NET跨平台

最新推荐文章于 2024-08-21 16:13:13 发布

阅读量2.8k

点赞数 2

分类专栏： HTML5+CSS|CSS3

原文链接：https://blog.youkuaiyun.com/WuLex

版权

HTML5+CSS|CSS3 专栏收录该内容

159 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
        body { margin: 0px; }
        
        #box {
            display: inline-block;

            line-height: 200px;
        }

        span { background-color: #0FF; }

        #box5 { vertical-align: text-top; }

        #box6 { vertical-align: text-bottom; }

        #box7 { vertical-align: top; }

    </style>
</head>

<body>

<div id="box">
    X<span id="box5">text-top</span>
    <span id="box6">text-bottom</span>
    <span id="box7">top</span>
</div>

</body>
</html>

vertical-align 属性设置一个元素的垂直对齐方式。

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。将#box中X的行高设置为0，就是这样的：
在这里插入图片描述
将#box中X的行高设置为200px，文字X的基线下移，文字text-top也要下移才能与之对齐，于是就变成了图中那样。