深入CSS vertical-align属性

1. 前置知识

在真正讲解vertical-align属性之前，我们需要了解下面一些前置的知识

1.1 x-Height

在各种内联相关模型中，凡是涉及垂直方向的排版或者对齐的，都离不开最基本的基线（baseline）。例如，line-height 行高的定义就是两基线的间距，vertical-align 的默认值就是基线

字母 x 的下边缘（线）就是我们的基线。

通俗地讲，x-height 指的就是小写字母 x 的高度，术语描述就是基线和等分线（mean line）（也称作中线，midline）之间的距离。 在这里插入图片描述注意：

在 CSS 世界中，vertical-align: middle的middle 指的是基线往上 1/2 x-height 高度。我们可以近似理解为字母 x 中间的交叉点那个位置。跟上面的 median（中线）不是一个意思。由此可见，vertical-align:middle 并不是绝对的垂直居中对齐，我们平常看到的middle 效果只是一种近似效果。主要是因为不同字体的文字在行内盒子中的位置是由些许不一样的。

1.2 line-height

对于非替换元素（即不包括input,img,select,textarea元素）的纯内联元素，其可视高度完全由 line-height 决定
对于块级元素，line-height 对其本身是没有任何作用的，我们平时改变 line-height，块级元素的高度跟着变化实际上是通过改变块级元素里面内联级别元素占据的高度实现的。
无论内联元素 line-height 如何设置，最终父级元素的高度都是由数值大的那个 line-height 决定的

示例：

.box { 
 line-height: 96px; 
} 
.box span { 
 line-height: 20px; 
} 
和
.box { 
 line-height: 20px; 
} 
.box span { 
 line-height: 96px; 
}

假如文字就 1 行，上述两种情况.box 元素的高度都是96px

2. vertical-align

2.1 生效前提

vertical-align 属性只能作用在 display 计算值为 inline、inline-block，inline-table 或 table-cell 的元素上

浮动和绝对定位会让元素块状化，因此这两种情况也不会使vertical-align属性生效

2.2 各种属性值

（1）px数值/百分比值

当我们给内联元素设置 vertical-align:10px，则内容就会在当前基线位置再往上精确偏移 10px。该数值是相对于当前元素的基线baseline的位置，即正数则上移，负数则下移。从这一点来看，vertical-align:baseline等同于vertical-align:0。

当为百分比值时，其相对的是当前元素line-height的百分比。假设某元素的 line-height 是 20px，那么此时 vertical-align:-25%相当于设置vertical-align:-5px。但是在如今的网页布局中，line-height 的计算值都是相对固定并且已知的，因此，直接使用具体的数值反而更方便。

（2）baseline

vertical-align 属性的默认值 baseline 表示当前元素的基线和父元素的基线位置对齐（基线即父元素中英文小写x的下沿位置）。对于替换元素则是替换元素的下边缘

<div class="father">
    <span class="x">小写的x</span><span class="va">vertical-align</span>
</div>


    .father {
        line-height: 40px;
    }
    .x{
        background-color: green;
    }
    .va{
        vertical-align: baseline;
        background-color: red;
    }

在这里插入图片描述

（3）middle

vertical-align 属性值 middle表示当前元素的垂直中心点和父元素的基线往上 1/2 x-height 处对齐。 换句话说，vertial-align:middle可以让内联元素的真正意义上的垂直中心位置和字符 x 的交叉点对齐

<div class="father">
    <span class="x">小写的x</span><span class="va">vertical-align</span>
</div>

    .father {
        line-height: 40px;
    }
    .x{
        background-color: green;
    }
    .va{
        vertical-align: middle;
        background-color: red;
    }

在这里插入图片描述

需要注意，如果是 inline-block 元素，则规则要复杂了：一个 inline-block 元素，如果里面没有内联元素，或者 overflow不是 visible，则该元素的基线就是其 margin 底边缘；否则其基线就是元素里面最后一行内联元素的基线

（4）top和bottom

<div class="father">
    <img src="./test.jpg" alt=""><span class="va">bottom</span>
</div>

    .father {
        /*!*父元素字体设置为0解决缝隙问题*!*/
        font-size: 0;
    }
    img{
        width: 50px;
        height: 50px;
        /*单独再设置font-size解决缝隙问题*/
        font-size: 12px;

    }
    .va{
        vertical-align: top;
        /*vertical-align: bottom;*/
        background-color: red;
        font-size: 12px;
    }

在这里插入图片描述

vertial-align:top 就是使当前元素和父元素垂直上边缘对齐，或者说使当前元素及其后代元素的顶部与整行的顶部对齐。

vertial-align:bottom 就是使当前元素和父元素垂直下边缘对齐，或者说使当前元素及其后代元素的底部与整行的底部对齐。。

需要注意区分：top/bottom是与当前元素和父元素边缘有关，而middle/baseline是和字符 x 打交道。

（5）text-top和text-bottom

<div class="father">
    <span class="text">父元素内文字</span><span class="va">text-bottom</span>
</div>

  .father {
        /*父元素字体设置较大点*/
        font-size: 28px;

    }
    .text{
        background-color: green;

    }
    .va{
        vertical-align: text-top;
        /*vertical-align: text-bottom;*/
        background-color: red;
        /*va元素字体设置较小点*/
        font-size: 12px;
    }

在这里插入图片描述

在这里插入图片描述 vertial-align:text-top 就是使使当前元素的顶部与父元素的字体顶部对齐。

vertial-align:text-bottom 就是使使当前元素的底部与父元素的字体底部对齐。

疑问：top/bottom和text-top/text-bottom的具体区别在哪？

top的顶部对齐的参考对象为当前整行的顶部（受line-height影响），而text-top只看父元素内文字字体的顶部，而不关心行高。bottom与text-bottom区别同理

（6）sub和super

vertical-align:super：提高盒子的基线到父级合适的上标基线位置。

vertical-align:sub：降低盒子的基线到父级合适的下标基线位置。

这两个属性值使用场景很少，基本用于一些数学公式或化学符号。

<sup>标签默认的 vertical-align 属性值就是 super，<sub>标签默认的 vertical-align 属性值就是 sub。

zhangxinxu<sup>[1]</sup> 

NH<sub>4</sub>HCO<sub>3</sub>

在这里插入图片描述