vertical-align: middle经常没反应，因为它只对inline、inline-block、inline-table或table-cell元素生效，且对齐的是行框x-height中线而非容器中心，受font-size、line-height及兄弟元素基线共同影响。
vertical-align: middle 为什么经常没反应
因为 vertical-align 只对 display 值为 inline、inline-block、inline-table 或 table-cell 的元素生效。<img alt="如何利用HTML实现图标文字对齐_通过CSS vertical-align属性" > 默认是 inline，所以能用；但如果你把图标包在 <div> 里又没改 <code>display，那写 vertical-align: middle 就纯属无效——浏览器直接忽略。
常见错误现象：img { vertical-align: middle; } 单独写，图片底部仍有空白；文字和图标明显错位，像“吊”在行高基线上。
- 检查图标元素的
display计算值，不是block才行 - 若用了
<i class="icon"></i>这类字体图标，它虽是inline，但部分图标库（如 Bootstrap Icons）自带内联vertical-align: -0.125em，会覆盖你的设置 - 别在
flex容器里给子项设vertical-align—— flex 子项不参与行内格式化上下文，该属性完全不触发
vertical-align: middle 对齐的是什么
它对齐的不是容器高度中点，而是父元素“行框（line box）”的 x-height 中线。这条线的位置由 font-size 和 line-height 共同决定，受当前字体 ascender/descender 影响。中文文字基线比英文低，SVG 图标 viewBox 原点不统一，结果就是：同一段 CSS，在 Chrome 里刚好看齐，Safari 里就下沉 2px；换了个 font-size: 1.2rem，原来调好的 -0.125em 突然又偏了。
所以 vertical-align: middle 不是“视觉居中”，而是一个依赖上下文的相对对齐，调不准很正常。
立即学习“前端免费学习笔记（深入）”；
- 想稳定控制，优先用
vertical-align: text-bottom（图标底边对齐文字底边）或vertical-align: -0.125em（em 单位更健壮） - 避免混用不同
font-size的图标在同一行，否则数值偏移会失效 - 调试时用 DevTools 的“像素拖拽”功能微调最直观，调稳后再固化为
em值
什么时候该放弃 vertical-align 改用 flex
当出现以下任一情况，硬调 vertical-align 就是在浪费时间：
- 同一行多个图标 + 文字，且字号或
line-height不一致 - 用了自定义 Web Font，加载未完成时 fallback 字体导致基线跳变
- 图标来自不同来源（Font Awesome / Bootstrap Icons / 自绘 SVG），它们的内置 baseline 逻辑不统一
- 需要支持 IE11 且父容器
line-height: normal（各引擎渲染差异极大）
此时直接切到 display: inline-flex + align-items: center：
.icon-text {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
它不依赖行高、字体或基线，逻辑清晰，且 align-items 控制的是交叉轴（对默认 flex-direction: row 就是垂直方向）。
注意：如果容器里混了 float 或 position: absolute 子项，它们会脱离 flex 流，不受 align-items 影响。
字体图标（如 i.fa）怎么调才准
字体图标本质是文字，但视觉中心往往不等于字体度量中心。单纯写 vertical-align: middle 常偏高或偏低。
实操建议：
- 统一设
i.fa { vertical-align: -0.125em; }—— em 相对当前字号，缩放安全 - 若父容器
line-height较大（比如 1.5），可临时加line-height: 1隔离干扰 - 改了
font-size后发现又不对齐？不是值错了，是参考系变了 —— 把偏移抽成 CSS 变量：--icon-align: -0.125em，改字号时一并更新 - 别在图标上设
font-size后不重置vertical-align，字号变大，baseline 位置也变
真正难搞的不是调不准，而是不同图标来源的 baseline 行为不可控；一旦项目里混用多种图标方案，vertical-align 就成了维护黑洞。
