vertical-align仅对行内、行内块和表格单元格元素有效，常用于图片与文字对齐、inline-block元素对齐等场景，通过设置baseline、top、middle等值调整垂直位置，解决默认基线对齐导致的空白或错位问题。
在CSS布局中，vertical-align 是控制行内元素或表格单元格内容垂直对齐方式的重要属性。很多人在使用它时会感到困惑，尤其是当它“看起来没生效”时。其实关键在于理解它的适用范围和作用机制。
vertical-align 适用于哪些元素？
这个属性只对行内元素（inline）、行内块元素（inline-block）以及表格单元格（table-cell）起作用。对块级元素设置 vertical-align 是无效的。
常见使用场景包括：
- 图片与文字的垂直对齐
- 多个 inline-block 元素之间的对齐
- 表格中单元格内容的垂直对齐
常用取值及效果说明
vertical-align 支持多种取值，最常用的有：
立即学习“前端免费学习笔记（深入）”；
- baseline：默认值，对齐基线。文本和图像通常按基线对齐，但有时会产生意外空隙
- top：顶部对齐，元素的顶端与整行的顶端对齐
- middle：居中对齐，元素的垂直中心与父行的基线加上小写字母x的中点对齐
- bottom：底部对齐，元素底端与整行最低点对齐
- text-top：对齐父元素的字体顶部
- text-bottom：对齐父元素的字体底部
- 长度值或百分比：如 vertical-align: 5px 或 vertical-align: -20%，可微调位置
图片与文字对齐实战技巧
图片默认是 inline 元素，会与文字基线对齐，常在图片下方留下空白缝隙。解决方法之一就是使用 vertical-align：
例如：
img {
vertical-align: middle;
}
这样图片就会和文字垂直居中对齐，视觉上更协调。若想完全消除底部空白，也可设为 vertical-align: top 或 bottom，取决于布局需求。
inline-block 元素间的对齐问题
当使用 display: inline-block 布局时，元素默认仍按 baseline 对齐，可能造成不对齐现象。比如两个高度不同的盒子：
.box1, .box2 {
display: inline-block;
vertical-align: top;
}
加上 vertical-align: top 后，它们就会顶部对齐，避免因默认基线对齐导致的错位。
基本上就这些。掌握 vertical-align 的关键是搞清它只影响行内上下文中的对齐行为，不是用来做整体页面垂直居中的。用对了场景，能轻松解决很多细节排版问题。
