vertical-align对齐的是行盒中线而非视觉中心，其目标是父元素行盒内x-height中线，受line-height、字体ascender/descender及图标内联样式共同影响；仅对inline/inline-block替换元素和表格单元格生效，对块级元素、绝对定位元素等无效。
vertical-align 对齐的是行盒中线，不是视觉中心
它实际对齐的目标是父元素行盒（line box）里一条叫“x-height 中线”的抽象线，位置由 line-height、当前字体的 ascender/descender、甚至图标自身内联样式共同决定。比如 Bootstrap Icons 的 SVG 默认带 vertical-align: -0.125em，会直接覆盖你写的 middle；中文文字基线又普遍比英文字母低，结果就是同一段 CSS，在 Chrome 里刚好看齐，到 Safari 里就下沉 1–2px。
哪些元素上 vertical-align 根本不生效
这个属性只对两类元素起作用：display: inline 或 display: inline-block 的替换元素（如 img、svg、input）和表格单元格（td、th）。对以下情况完全无效：
-
div、p等块级元素，哪怕加了vertical-align也白写 -
position: absolute或fixed元素，已脱离行框，基线对齐逻辑不触发 - 父容器未设
line-height，浏览器用默认值（通常 1.2 左右），该值随font-size缩放，导致对齐点漂移
为什么调 vertical-align: middle 总是差一点
因为 middle 的计算基准是“父元素行盒高度的一半”，但这个高度本身不稳定：
- 换
font-size后，小写字母 x 的 x-height 变了，中线位置跟着动 - 混用不同尺寸图标（如一个
font-size: 1rem，一个1.5rem），它们的 baseline 实际偏移量不一致 - Web Font 加载未完成时 fallback 字体切换，基线瞬间跳变
- SVG 的
viewBox原点位置不统一，渲染出的高度可能含透明边距
真正能落地的替代方案
别硬调 vertical-align 数值，优先切结构：
- 把图标和文字包进一个
span或div，设display: inline-flex+align-items: center—— 它不依赖字体度量，也不受line-height干扰 - 若必须保留 inline 结构，改用
vertical-align: text-bottom：它把图标底边对齐到父元素font-size定义的 em-box 底边，稳定可预期 - 避免在响应式项目中用
px单位调偏移，改用em（如-0.125em），并抽成 CSS 变量统一管理
最常被忽略的一点：对齐不准往往不是某一行 CSS 写错了，而是整个行内上下文（font-size、line-height、图标来源、加载状态）没被当作一个整体来约束。固定图标尺寸、统一字体加载策略、限制父容器 line-height 行为，比反复拖拽 DevTools 里的像素更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
