在处理行内图文垂直居中对齐（如本站底部的备案行）时，常用的方法是将父元素采用 flex 布局，并设置 align-items: center。今天我了解到了一个 CSS 属性——vertical-align，在简单场景下可以更轻量、更直接地实现该效果。

为什么我从来没听说过这个东西 QwQ

vertical-align 是什么

vertical-align 属性用于指定行内（inline）、行内块（inline-block）或表格单元格（table-cell）元素的垂直对齐方式。

注意：vertical-align 对块级元素无效。

该属性的详细取值见文末。

示例：图文垂直对齐

<style>
.demo {
   background: red;
   width: 200px;
}
.img {
   vertical-align: [top/bottom/midddle];
}
</style>

<div class="demo">
   <img class="img" src="https://huajimc.cn/static/img/avatar.jpg" height="100">
   <span>我是滑稽mc。 </span>
</div>

默认效果（vertical-align: baseline）：

顶部对齐（vertical-align: top）

底部对齐（vertical-align: bottom）

居中对齐（vertical-align: middle）

去除图片底部的空白缝隙

注意看上面默认情况的图片，头像与父容器盒子底部存在一段空隙。这是因为行内元素的默认垂直对齐方式是 baseline，即与父元素的基线对齐，而父元素基线通常位于文本底部（字母 x 的下边缘），导致图片下方留白。

解决方法有两种

1. 给 img 设置 vertical-align 属性为 top|bottom|middle 等，不要用默认的基线对齐
2. 给 img 设置 display: block 转化为块级元素

此外，表格单元格的垂直对齐也由 vertical-align 控制，具体可见文末属性值第3条。

vertical-align 属性值

1. 相对父元素的值

这些值使元素相对其父元素垂直对齐：

值	作用
baseline	默认值，使元素的基线与父元素的基线对齐
middle	使元素的中部与父元素的基线加上父元素 x-height 的一半对齐
text-top	使元素的顶部与父元素文字的顶部对齐
text-bottom	使元素的底部与父元素文字的底部对齐
sub	使元素的基线与父元素的下标基线对齐
super	使元素的基线与父元素的上标基线对齐
	使元素的基线对齐到父元素的基线之上的给定长度。可以是负数
	使元素的基线对齐到父元素的基线之上的给定百分比，该百分比是 line-height 属性的百分比。可以是负数

没有基线的元素，使用外边距的下边缘替代。

2. 相对行的值

下列值使元素相对整行垂直对齐：

值	作用
top	使元素及其后代元素的顶部与整行的顶部对齐
bottom	使元素及其后代元素的底部与整行的底部对齐

3. 表格单元格的值

值	作用
top	使单元格内边距的上边缘与该行顶部对齐
middle	使单元格内边距盒模型在该行内居中对齐
bottom	使单元格内边距的下边缘与该行底部对齐