vertical-align仅对inline、inline-block和table-cell元素生效，对block、flex或grid子元素无效；其作用前提是元素处于行内格式化上下文或display为table-cell。
vertical-align 只对 inline、inline-block 和 table-cell 元素生效
它根本不是为块级布局设计的，而是专门解决行内格式化上下文（IFC）中“一行内多个元素怎么垂直摆”的问题。浏览器看到 display: block 的 div 或 p，直接跳过 vertical-align 解析——不报错、不警告、也不起效。
常见错误现象包括：
- 给
flex容器里的子项加vertical-align: middle，DevTools 里能看到声明，但“Computed”值始终是baseline，且无视觉变化 - 把
img和div并排写，img默认是inline，而紧挨着的div是block，会强制换行、退出 IFC，导致vertical-align失去作用环境 - 在
grid容器中设置该属性，同样被忽略，因为 grid 布局不参与 IFC
inline-block 是“看起来像块级，实则听 IFC 调遣”
display: inline-block 是唯一能同时满足两个条件的类型：有独立盒模型（可设 width/height/padding），又参与行内格式化上下文（IFC）。所以它既支持块级样式，又响应 vertical-align。
使用场景举例：
立即学习“前端免费学习笔记（深入）”；
- 图标
img和文字按钮span在同一行对齐，都设为inline-block后用vertical-align: middle - 多个卡片并排显示，统一用
vertical-align: bottom对齐底部，避免因内容高度不同导致参差
注意：vertical-align 的参照物是整行的行框（line box），不是父容器高度；若父容器设置了 line-height，它会直接影响对齐位置。
table-cell 的 vertical-align 行为完全不同
当元素是 display: table-cell（比如 td），vertical-align 控制的是“单元格内部内容”相对于单元格自身的对齐方式，而不是相对于某一行。
关键差异：
-
vertical-align: middle在table-cell中会让内容在其盒模型内垂直居中，行为可预测、兼容性好 - 而同样的值在
inline-block中，是对齐到“父元素基线 + x-height/2”，受字体、line-height影响明显 -
top/bottom在table-cell中对齐的是单元格内边距盒（padding-box）的边缘，不是行框
为什么 baseline 对齐总“看起来不对”
默认值 baseline 是让元素的文本基线对齐，但不同字体、不同 font-size 的基线位置并不一致。例如中文汉字和英文字符的基线定义不同，¥ 和 元 并排时一高一低，是正常表现，不是 bug。
容易被忽略的细节：
-
vertical-align: middle不等于“视觉居中”，它参考的是 x-height（小写字母 x 的高度）的一半，而很多浏览器把ex当作0.5em，实际位置可能偏上 -
text-top和text-bottom对齐的是父元素内容区（content area）的上下边界，不依赖line-height，比top/bottom更稳定 - 替换元素（如
img、input）没有基线，其baseline等同于bottom，这也是为什么图片常“挂”在文字下方
真正要让块级元素在其父容器中垂直居中，vertical-align 不是解法，而是误入歧途的信号。现代方案应优先选 flex 或 grid，它们的设计目标就是解决这类定位问题。
