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

最新推荐文章于 2023-05-02 10:23:49 发布

转载最新推荐文章于 2023-05-02 10:23:49 发布 · 3k 阅读

4 ·

CC 4.0 BY-SA版权

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

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

159 篇文章

订阅专栏

本文深入探讨了CSS中vertical-align属性的使用方法及其对行内元素的影响，通过实例展示了如何调整元素的垂直位置，使其在不同场景下精确对齐。

<!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也要下移才能与之对齐，于是就变成了图中那样。