vertical-align对inline元素“不起作用”通常因父容器未显式设置line-height（如设为normal或未定义），导致基线位置不可控；其middle值是对齐“父基线+x-height/2”，非视觉居中，且需至少两个行内级兄弟元素才能体现对齐差异。
vertical-align 对 inline 元素“不起作用”，通常不是它失效了，而是你没看到预期效果——根本原因是父容器的 line-height 没有显式设置，或设置为 normal。
父容器必须有明确的 line-height 值
浏览器对 line-height: normal 的计算是字体相关的、不可控的：它依赖字体的 ascender/descender 和 metrics，不同字体、不同字号下结果不一致。这意味着即使你写了 vertical-align: middle，实际对齐参考线（基线位置）本身就在浮动。
- ✅ 正确做法：给父容器（比如
<p>或<div>）设一个具体值，如line-height: 24px或line-height: 1.5 - ❌ 错误写法：
line-height: normal、line-height: unset、或者干脆不写 - ⚠️ 注意：
line-height必须作用在包含inline子元素的**直接父容器**上，不是更外层的祖先
vertical-align: middle 并不等于“垂直居中”
vertical-align: middle 是让元素的中点对齐到“父元素基线 + 半个 x-height”——这个 x-height 来自父元素的字体，不是子元素的。所以当父元素用的是 font-size: 16px 的 sans-serif，而子元素是 <img> 或小图标时，middle 往往会偏高一点。
- 常见现象：文字和图标并排时，图标看起来“浮在上面”
- 推荐调试顺序：
middle→text-bottom→text-top→ 最后用vertical-align: -2px这类像素微调 -
vertical-align的百分比值（如-10%）是相对于父容器的line-height计算的，不是字体大小
inline 元素自身 line-height 不影响 vertical-align 行为
给 inline 元素自己设 line-height（比如 span { line-height: 0; }）不会让它“变矮”从而更容易对齐——因为 line-height 控制的是该元素所在行内盒（inline box）的高度，不是元素自身渲染高度；而且 vertical-align 参照的始终是父容器的 line-height 和基线。
立即学习“前端免费学习笔记（深入）”；
- ⚠️ 容易踩的坑：试图通过
span { line-height: 0; }来消除间隙或强制对齐，这基本无效，还可能破坏文字可读性 - 真正起作用的只有父容器的
line-height+ 子元素的vertical-align组合 - 如果父容器是
display: inline-block，它自己也得满足“有明确line-height”这个前提，否则它的子元素的vertical-align依然无参照
为什么有时候加了 line-height 还是没反应
最常被忽略的一点：vertical-align 只在**同一行内多个行内级元素之间**才体现对齐差异。如果你只放了一个 inline 元素，它默认 baseline 对齐，没有对比对象，自然看不出变化。
- 验证方法：至少放两个兄弟
inline或inline-block元素，分别设不同vertical-align值（如top和bottom），再观察相对位置 - 注意空格、换行符也会生成“幽灵空白节点”，参与行框构建，可能干扰对齐表现
- IE6/7 下
vertical-align的百分比值不支持小数line-height（如line-height: 1.4），会退化为整数部分
真正卡住的地方往往不是属性写错了，而是没意识到 vertical-align 的所有行为都锚定在父容器那条看不见的基线上——而这条基线的位置，完全由父容器的 line-height 和字体决定。
