vertical-align用于内联或表格单元格元素的垂直对齐，常用值包括baseline、top、middle、bottom等；通过设置img{vertical-align:middle}可实现图文居中，inline-block元素可通过vertical-align统一对齐方式，table-cell元素可利用该属性实现内容垂直居中。
vertical-align 是CSS中控制内联元素或表格单元格内容垂直对齐方式的重要属性。很多人在使用它时会感到困惑，主要是因为它只对内联元素、inline-block元素以及表格单元格（table-cell）生效，而对块级元素无效。下面详细介绍它的常见用法和实用技巧。
1. vertical-align 的常用取值
该属性有多个可选值，最常用的包括：- baseline：默认值，对齐元素的基线与父元素的基线对齐。
- top：元素的顶部与行中最高元素的顶部对齐。
- middle：元素的中部与父元素的基线加上小写字母x的高度的一半对齐。
- bottom：元素的底部与行中最低元素的底部对齐。
- text-top：元素顶部与父元素字体的顶部对齐。
- text-bottom：元素底部与父元素字体的底部对齐。
- 百分比 / 长度值：如 20% 或 5px，相对于 line-height 进行偏移。
2. 图片与文字垂直居中对齐
这是 vertical-align 最常见的应用场景之一。当图片和文字放在同一行时，默认可能不对齐。例如：
<span>文字<img src="icon.png" alt=""></span>若想让图片与文字垂直居中，可以这样设置：
img {
vertical-align: middle;
}
此时图片的中点会与文字基线向上半个 x-height 对齐，视觉上更协调。
3. inline-block 元素之间的对齐问题
当使用 display: inline-block 布局时，元素默认 align 到 baseline，可能导致意外的上下错位。解决方法：
- 统一设置 vertical-align: top，使所有 inline-block 元素顶部对齐。
- 或使用 vertical-align: middle 实现居中对齐。
- 也可将父容器的 font-size: 0 来消除空白字符影响，再单独设置子元素字体大小。
4. 表格单元格中的垂直对齐
对于display: table-cell 的元素，vertical-align 控制内容在单元格内的垂直位置。
.cell {
display: table-cell;
vertical-align: middle;
height: 100px;
}
这能让内容在单元格中垂直居中，常用于不依赖 Flexbox 的老式垂直居中方案。
基本上就这些。掌握 vertical-align 的关键是理解它作用于行内格式化上下文，不是用来布局整个块的。合理使用 middle、top 等值，能有效解决图标、文本、按钮等内联元素的对齐问题。不复杂但容易忽略细节。
