vertical-align在响应式场景下易失效，因其对齐基准是动态变化的行框（line box），受font-size、line-height、换行及子元素尺寸影响，导致middle等值漂移；推荐用text-bottom或flex替代。
vertical-align 为什么在响应式场景下容易失效
因为 vertical-align 的对齐基准是整行的行框（line box），而响应式布局中，font-size、line-height、子元素宽高、甚至换行都会动态改变行框高度和基线位置。你设了 vertical-align: middle，但父容器 font-size 缩小后，小写字母 x 的中点位置变了，图片“看起来”就偏上或偏下了。
常见现象包括：移动端文字变小后，图标突然比文字高半截；横屏时多列 inline-block 卡片底部参差不齐；使用 rem 或 vw 调整字号后，原本对齐的 img 和 span 出现像素级错位。
- 父容器未显式设置
line-height，依赖浏览器默认值（通常为 1.2 左右），该值会随font-size缩放，导致middle实际对齐点漂移 - 子元素中混有不同
font-size的文字（如标题 + 副文本），它们的基线不一致，vertical-align只能按“整行”统一参考，无法逐个校准 -
vertical-align: middle对图片的“中点”计算基于其自身高度，但图片若含透明边距或非标准比例（如 SVG 未设viewBox），渲染高度可能不稳定
用 text-bottom 替代 middle 处理图片与文字对齐
对绝大多数图文并排场景（如按钮内图标+文字、列表项前缀图标），vertical-align: text-bottom 比 middle 更可靠——它把图片底边直接对齐到父元素字体的底端（即 font-size 所定义的 em-box 底边），完全避开基线和中点计算的浮动影响。
这个值不随 line-height 改变，也不依赖兄弟元素尺寸，只要父级有明确 font-size，结果就稳定可预期。
- 适用对象：所有
display: inline或inline-block的img、svg、input[type="button"]等替换元素 - 无需额外设置父容器
line-height或font-size: 0，避免引入新副作用 - 注意不要用于需要严格视觉居中的复杂组合（如图标+两行文字），此时应改用
flex
示例：img { vertical-align: text-bottom; } —— 这一行代码就能解决 80% 的响应式图文错位问题。
当需要真正响应式分段对齐时，别硬撑 vertical-align
如果你的“分段式内容块”包含标题、描述、按钮三部分，且要求整体在容器中垂直居中、左右间距自适应、小屏时堆叠——vertical-align 不是工具，是障碍。它天生无法处理换行、无法控制主轴分布、不能响应子项数量变化。
此时必须切换技术栈：用 display: flex 代替 inline-block + vertical-align 组合技。父容器加 display: flex; align-items: center;，子元素自动按交叉轴居中，flex-wrap: wrap 控制换行，gap 管理间距，全部原生响应。
- 兼容性已无顾虑：
flex在 Chrome 29+、Firefox 28+、Safari 9+、Edge 12+ 完全可用（IE11 仅需避免align-items: stretch等边缘用法） - 避免踩坑：不要给 flex 子项再设
vertical-align，它会被忽略且可能干扰渲染 - 性能更优：flex 布局由引擎统一计算，比多个
inline-block+ 行盒重排更轻量
inline-block 间隙和 font-size: 0 的副作用必须提前预判
为消除 inline-block 元素间的空白符间隙，很多人会写 font-size: 0 在父容器上。但这会让 vertical-align 的参考基线消失——因为基线定义依赖字体度量，font-size: 0 下无有效基线，middle、text-bottom 等值行为变得不可预测，尤其在 Safari 和旧版 Chrome 中表现不一。
更稳的替代方案是：用注释节点或负 margin 消除间隙，或直接改用 flex / grid 布局，从根源规避这个问题。
- 如果坚持用
font-size: 0，必须在所有子元素上显式重置font-size，否则文字不可见；同时vertical-align应只用top/bottom这类不依赖基线的值 - 移动端 touch 区域敏感时，间隙本身可能影响点击热区，
font-size: 0并不能缩小实际渲染间隙，只是让空白字符不可见 - 最易被忽略的一点：
font-size: 0会影响em、ex单位的计算，若子元素用了这些单位做尺寸或边距，整个响应逻辑会崩坏
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
