vertical-align 不是修复 bug 而是必须显式设置的对齐开关；inline-block 元素默认 baseline 对齐导致错位，因 img、button 等基线位置不同；text-bottom 和 top 最可靠，flex 更适合复杂对齐场景。
vertical-align 不是“修复 bug”，而是必须显式设置的对齐控制开关——默认的 baseline 行为在混合图文、按钮、图标时几乎必然导致错位。
为什么 inline-block 元素总是一高一低？
这不是渲染错误，是 CSS 2.1 明确规定的：所有 display: inline-block 元素默认按 vertical-align: baseline 对齐。但“baseline”不是统一的一条线——<img> 的 baseline 在图片底边向上约 4px 处（预留 descender 空间），<button></button> 的 baseline 取决于其内部文本字体度量，空 <button></button> 甚至可能 fallback 到 margin-bottom 边缘。结果就是：它们的 baseline 位置不同，浏览器老老实实对齐后，视觉上就“歪了”。
常见现象包括：
-
<img>和<span>文字</span>并排时，图标看起来下沉 - 响应式缩放后，原本对齐的卡片底部突然参差不齐
- 一行里混用有文字和无文字的
<button></button>，后者明显下坠
vertical-align: middle 为什么经常失效？
vertical-align: middle 并不是让元素垂直居中于父容器，而是将元素自身的中点对齐到父行框（line box）内 text-bottom 与 text-top 的中点。这个中点位置受 font-size、line-height、甚至兄弟元素字体差异影响，一动就漂移。
实操建议：
- 避免在响应式场景依赖
middle，尤其当父容器使用rem或vw动态调整字号时 - 不要给父容器设
font-size: 0来“消除间隙”——它会让子元素内文字不可读，除非你逐个重设font-size - 若必须微调，优先用数值单位：
vertical-align: -2px比middle更可控
什么值真正可靠？推荐 text-bottom 或 top
对绝大多数图文并排场景（如按钮内图标+文字、列表项前缀），vertical-align: text-bottom 是最稳的选择。它把元素底边直接对齐到父元素 font-size 所定义的 em-box 底边，完全绕开基线计算浮动。
示例：
img, svg, input[type="button"] {
vertical-align: text-bottom;
}
如果需要顶部对齐（比如多行文字旁的图标保持顶端齐平），直接用 vertical-align: top —— 它不依赖任何字体度量，只看父行框顶部，兼容性好且行为确定。
注意：text-bottom 和 top 都不关心子元素有没有内容、有没有换行、line-height 是多少，只要父级有明确 font-size，结果就可预期。
什么时候该放弃 inline-block 改用 flex？
当你发现要反复调试 vertical-align、line-height、font-size 才能让三四个元素勉强对齐时，说明已超出 inline-block 的适用边界。
典型信号：
- 同一行里既有单行文字、又有两行标题 + 副文本
- 需要图标在文字正中间（非行框中点），且文字高度动态变化
- 布局需响应式换行，同时保持每行底部严格对齐
这时改用 display: flex + align-items: center，语义清晰、控制直接，且不再受行框、基线、空白符等隐式规则干扰。
复杂点在于：flex 替代方案需要重构 DOM 结构或加 wrapper，而 vertical-align 是纯样式层修复——选哪个，取决于你愿不愿意为长期可维护性多写几行代码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
