vertical-align 不是造成偏移的原因，而是暴露了 inline-block 元素基线不一致的本质问题；默认 baseline 对齐因 img、button 等基线位置不同而视觉错位，text-bottom 和 top 最可靠，flex 更适合复杂对齐。
vertical-align 不会造成偏移，它只是暴露了 inline-block 元素本就存在的基线不一致问题。 默认 vertical-align: baseline 会让所有 inline-block 元素按各自“基线”对齐，而这个基线位置因元素类型不同而浮动——这不是 bug，是 CSS 规范行为。
inline-block 的 baseline 到底在哪？
浏览器对不同 inline-block 元素的 baseline 定义完全不同：
-
4px处（预留 descender 空间） - 含文字的
基线由其内部文本的font-size和line-height决定 - 空
或overflow: hidden的 inline-block，baseline 会 fallback 到 margin 底边
结果就是：它们的 baseline 根本不在同一水平线上，vertical-align: baseline 老老实实对齐后，视觉上就“一高一低”。
vertical-align: middle 为什么总看起来不准？
它不是让元素居中于父容器，而是把元素自身中点对齐到父行框内 text-top 与 text-bottom 的中点。这个中点位置受以下因素动态影响：
- 父级
font-size变化（如 rem/vw 响应式缩放） - 父级未显式设
line-height，依赖浏览器默认值（通常为1.2），该值随字号缩放 - 兄弟元素字体不同（比如标题用
18px/1.1，副文用14px/1.4），导致整行基线参考混乱
所以 vertical-align: middle 在响应式场景下极易漂移，不是你写错了，是它本来就不稳定。
哪些 vertical-align 值真正可靠？
放弃幻想，用行为确定的值：
- 图文并排、图标+文字按钮等常见场景 → 统一设
vertical-align: text-bottom（对齐到父级 font-size 定义的 em-box 底边，完全绕开基线计算） - 需要顶部严格齐平（如多行文字旁的 icon）→ 直接用
vertical-align: top（只看父行框顶部，不依赖任何字体度量） - 避免
vertical-align: 0或vertical-align: baseline，除非你明确知道所有子项基线一致
示例：img, svg, input[type="button"] { vertical-align: text-bottom; }
什么时候该彻底放弃 vertical-align？
当你发现以下任一情况时，说明已超出它的适用边界：
- 父容器用了
display: flex或display: grid，却还在子元素上硬加vertical-align（此时它完全无效） - 需要整体垂直居中、换行堆叠、自适应间距——
vertical-align天生无法响应这些需求 - 反复微调
vertical-align数值（比如-2px、3px）才能勉强对齐
真正容易被忽略的是：哪怕所有子项都是 inline-block，只要父容器没显式设置 font-size 和 line-height，整行的行框高度和基线参考点就不可控——这时候再调 vertical-align，只是在修浮点数误差。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
