vertical-align 各个属性值的含义

注意：vertical-align 属性不继承

有关基线、行内框、行框、内容区、行距的定义

vertical-align: baseline

vertical-align: baseline 强制元素的基线与父元素的基线对齐。（多数浏览器的默认值）

vertical-align: super

vertical-align: super 使元素基线高于父元素基线，但是高多少规范中没有要求，由用户代理（浏览器）自己决定，不同浏览器可能不同。

<style>span {vertical-align: super;}
</style>
<body><span>span1<span>span2</span>span1
</span>
</body>

红线表示此元素的基线。默认情况下同一行的不同元素的基线是在同一条水平线上的。

vertical-align: sub

vertical-align: sub 使元素的基线低于父元素的基线，与 super 一样，低多少由用户代理决定，不同浏览器可能不同。

<style>span {vertical-align: sub;}
</style>
<body><span>span1<span>span2</span>span1
</span>
</body>

红线表示元素基线：

vertical-align: bottom / text-bottom

vertical-align: bottom 将元素所在行内框的底边与行框的底边对齐。这个属性值 bottom 要和 text-bottom 区分开来。

vertical-align: text-bottom 将元素行内框的底边与文本的底边对齐。

一行中所有元素中最高的行内框即为行框的顶端，最低行内框为行框的底端，因此 bottom 的下沉程度是一定大于或等于 text-bottom 的下沉程度的。

<body><p>这是一幅<img src="data:images/@SYV]MDOW@RIC8`)IJVB($I.jpg" alt="" style="vertical-align: bottom;">图像<span style="font-size: larger;">span</span></p><p>这是一幅<img src="data:images/@SYV]MDOW@RIC8`)IJVB($I.jpg" alt="" style="vertical-align: text-bottom;">图像</p>
</body>

font-size 属性可以直接影响到元素自己的行内框，font-size 越大，元素自己的行内框越大。并且第一行的 span 标签也可以影响到第一行的行框。因此，第一行的行框是一定大于第二行的行框的，所以第一行图片的下降程度要比第二行大一些。

红线表示对应元素的 text-bottom，紫色表示图片的底边。

如果把第一行的 span 标签删除，两行没什么区别了。

<body><p>这是一幅<img src="data:images/@SYV]MDOW@RIC8`)IJVB($I.jpg" alt="" style="vertical-align: bottom;">图像</p><p>这是一幅<img src="data:images/@SYV]MDOW@RIC8`)IJVB($I.jpg" alt="" style="vertical-align: text-bottom;">图像<span>span</span></p>
</body>

vertical-align: top / text-top

vertical-align: top 与 bottm 相反。将元素所在行内框的顶边与行框的顶边对齐。

vertical-align: text-top 与 text-bottom 相反。将元素行内框的顶边与文本的顶边对齐。

第一个例子：第一行的行框与第二行的 p 标签行内框高度一致，所以两个图像的上升程度没有区别。

<body><p>这是一幅<img src="data:images/@SYV]MDOW@RIC8`)IJVB($I.jpg" alt="" style="vertical-align: top;">图像</p><p>这是一幅<img src="data:images/@SYV]MDOW@RIC8`)IJVB($I.jpg" alt="" style="vertical-align: text-top;">图像<span>span</span></p>
</body>

第二个例子中，第一行的 span 标签设置了 font-size: 30px ，因此使第一行的行框高度增加，所以第一行图片的上升程度一定大于第二行。

<body><p>这是一幅<img src="data:images/@SYV]MDOW@RIC8`)IJVB($I.jpg" alt="" style="vertical-align: top;">图像<span style="font-size: 30px;">span</span></p><p>这是一幅<img src="data:images/@SYV]MDOW@RIC8`)IJVB($I.jpg" alt="" style="vertical-align: text-top;">图像</p>
</body>

总之，对齐后的元素的具体位置取决于行中有什么元素、元素有多高，以及父元素的字号。

vertical-align: middle

vertical-align: middle （通常用在图像上）注意作用与字面意思不太一样。作用为：把行内元素方框的中线以父元素的基线为基准，向上平移 0.5ex，即父元素 font-size 值得一半。但是，这并不是规范定义的距离，所以在不同浏览器上向上偏移的量可能不同。

<body>
<p>这是一幅<img src="data:images/@SYV]MDOW@RIC8`)IJVB($I.jpg" alt="" style="vertical-align: middle;">图像</p>
</body>

红线为文字 text-bottom，蓝线为图像中线，两者之间的距离即为 0.5 ex。

百分数

当把 vertical-align 设置为百分数时，计算方法为：此元素的 line-height 值 × 百分数。百分数为正，表示根据父元素的基线，元素的基线向上平移 此元素的 line-height 值 × 百分数；若百分数为负，表示根据父元素的基线，元素的基线向下平移 此元素的 line-height 值 × 百分数。

<div style="font-size: 14px; line-height: 18px;">I felt that, if nothing else, I deserved a
<span style="vertical-align: 50%;">raise</span> for my efforts.
</div>

span 的基线以 div 的基线为基准，向上平移了 9 px。

长度值

vertical-align: n px 表示将元素从原来的位置向上平移或向下平移 n px 个位移。注意，这个属性值的设置不会导致发生相邻行之间的文本重叠现象，但是可能会改变此行的行框顶端位置或底端位置。

当 n 为正数时，上升：

<div style="width: 200px;">I felt that, if nothing else, I deserved a<up style="vertical-align: 10px;">raise</up> for my efforts.
</div>

当 n 为负数时，下降：

<div style="width: 200px;">I felt that, if nothing else, I deserved a<up style="vertical-align: -10px;">down</up> for my efforts.
</div>

<div style="width: 200px;">I felt that, if nothing else, I deserved a<up style="vertical-align: -10px;">down</up> for my efforts.
</div>

参考：《CSS权威指南》第四版