vertical-align仅对inline、inline-block和table-cell元素生效，对block、flex或grid子元素无效；其作用前提是元素处于行内格式化上下文或display为table-cell。
vertical-align 对哪些元素生效
vertical-align 只对三类元素起作用：inline、inline-block 和 table-cell 元素。它对 block、flex 或 grid 子项完全无效——哪怕你给一个 div 设置了 vertical-align: middle，浏览器也会默默忽略。
常见误用场景：
- 在
display: flex容器里给子元素设vertical-align，毫无效果 - 给
p或div（默认display: block）直接加该属性，DevTools 里能看到声明，但“Computed”值仍是baseline且不触发任何偏移 - 在表格中用了
td却忘了它默认是table-cell，这时vertical-align才真正起效
baseline 对齐为什么总“看起来不对”
默认值 vertical-align: baseline 是让元素的**文本基线**对齐，不是底部、顶部或中心。而不同字体、不同 font-size 的基线，在各自行框中的绝对位置并不一致。
例如：<span style="font-size:24px">¥</span><span style="font-size:12px">元</span>，两个字符视觉上明显一高一低，不是 bug，是基线对齐的正常表现。
立即学习“前端免费学习笔记（深入）”；
解决思路：
- 若需视觉底部对齐，改用
vertical-align: bottom（注意：它对齐的是元素盒模型的border-bottom，非文字底端） - 若需中间对齐，优先用
vertical-align: middle，但它对齐的是父元素line-height / 2处，不是元素自身高度一半，所以常需配合调整line-height - 更稳的替代：把容器设为
display: table-cell，再用vertical-align: middle—— 此时行为可预测，且兼容性好
inline 元素里混排图标和文字怎么对齐
典型场景：按钮内一个 svg 和一段文字并排，vertical-align 设成什么值才不飘？
关键点在于：SVG 默认是 inline 替换元素，其对齐锚点是基线，但它的“基线”位置由渲染引擎决定，通常比文字基线略低。
实操建议：
- 统一设
vertical-align: -0.125em或-2px（需实测），比middle更贴近文字视觉中心 - 更推荐方案：给图标加
display: inline-block; vertical-align: text-bottom;，再微调margin-bottom补偿下降部 - 彻底规避：把整个按钮内容包进
display: flex容器，用align-items: center—— 这时vertical-align不再参与计算
为什么设了 vertical-align 还没反应
最常被忽略的三个前提条件：
- 父容器必须有明确的
line-height（不能是normal，否则浏览器按字体 metrics 自行计算，不可控） - 父容器不能是
display: flex或display: grid，否则子元素脱离行内格式化上下文，vertical-align失效 - 子元素不能有
float或position: absolute，这些会让它脱离行框，失去对齐参照
调试技巧：打开 Chrome DevTools → “Computed” 面板 → 检查目标元素的 vertical-align 值是否被 override，再看 “Line Height” 和 “Font Size” 是否稳定——浮动的行高是文字错位的隐形推手。
