CSS属性：vertical-align详解

最新推荐文章于 2025-10-06 07:25:40 发布

原创最新推荐文章于 2025-10-06 07:25:40 发布 · 1k 阅读

4 ·

CC 4.0 BY-SA版权

★ CSS 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了Vertical-align属性，该属性用于垂直对齐inline、inline-block和inline-table元素。详细说明了文字对齐的几种方式，如baseline、middle、top、bottom等，还提及允许指定长度和百分比值。此外，阐述了图片对齐中块元素图片默认与基线对齐的问题及解决办法，也提到了表格对齐。

文章推荐 link1 link2 link3

Vertical-align属性

Vertical-align被用于垂直对齐inline元素，inline-block元素，以及inline-table的元素
inline元素基本上指的就是文本，inline-block元素基本上指图片，inline-table基本上指的表格

文字对齐

基本介绍

baseline：将元素x的基线与其父元素x的基线对齐
middle：将元素行高的中间与父对象x的基线对齐，再加上父对象的x高度的一半
top：将元素的顶部及其后代与整个行的顶部对齐
bottom：将元素的底部及其后代与整行的底部对齐
允许指定长度值和百分比值，在与基线对齐的基础上正值向上，负值向下

<style type="text/css">
    div{
        font-size: 100px;
        border: 10px solid red;
    }
    span{
        font-size: 20px;
        border: black solid 5px;
        /*vertical-align: baseline;*/
        /*vertical-align: top;*/
        /*vertical-align: middle;*/
        /*vertical-align: bottom;*/
        vertical-align: -100px;
    }
</style>

<body>
<div>index
    <span>xxx</span>
</div>
</body>