直接用align-items: baseline最接近精准对齐，但需SVG与文字同属一排版上下文；vertical-align: middle总差1–2px因其对齐的是行盒中线（x-height的0.5ex处），受字体、viewBox及浏览器渲染差异影响。
直接用 align-items: baseline 是最接近“精准”的方案，但前提是 SVG 和文字必须处于同一排版上下文——浮动、inline-block 混用、缺失显式尺寸，都会让 baseline 失效。
为什么 vertical-align: middle 总是差 1–2px
它对齐的不是视觉中心，而是父元素行盒中线（约在 x-height 的 0.5ex 处），而 SVG 作为替换元素，默认 baseline 位置由 viewBox 和浏览器字体度量共同决定。同一段 CSS 在 Chrome 和 Safari 中偏差常见，尤其当文字用了中文 Web Font 或 font-size: 12px 时。
-
vertical-align: middle对display: block的 SVG 完全无效 - 混用不同图标来源（如 Bootstrap Icons + 自绘 SVG）时，内置 baseline 不一致，数值无法复用
- 页面缩放或高 DPI 屏下，
px偏移会失准；em更安全，但需随字号同比例调整
真正起效的三步结构控制法
不是调一个属性，而是切断 baseline 干扰链：
- 让 SVG 脱离 inline baseline：给
<svg>显式加display: inline-block或display: block，别依赖默认行为 - 统一高度基准：父容器设
line-height: 1或固定值（如line-height: 24px），SVG 设width: 16px; height: 16px;，避免靠font-size缩放 - 启用基线对齐上下文：父容器用
display: flex; align-items: baseline;，且确保文字子元素含真实内联文本（不能是空<span></span>）
Flex 容器里 align-items: baseline 的隐性前提
它只对“有基线”的子元素生效。SVG 本身无文本，它的 baseline 默认取 bottom 边缘附近；若想让它和文字对齐，得靠辅助手段：
立即学习“前端免费学习笔记（深入）”；
- 给 SVG 加
align-self: baseline—— 无效，因为 SVG 是 replaced element，不生成文本基线 - 更可靠的做法：在 SVG 同级插入一个隐藏文本节点，比如
<span aria-hidden="true"></span>（零宽空格），强制父容器识别 baseline 参考系 - 或改用
display: inline-flex父容器 +align-items: center，再微调 SVG 的margin-top: -1px—— 这是现代项目中最可控的折中解
IE11 兼容场景下的底线操作
若必须支持 IE11，inline-flex 不可用，只能退回 inline-block + vertical-align 组合，但要守住三条线：
- 所有元素（文字容器、SVG、图标 wrapper）都加
display: inline-block - 统一
font-size：SVG 容器和文字使用相同 text 类（如text-sm），否则vertical-align: -0.125em计算基准错乱 - 禁用内联样式干扰：移除 SVG 上的
style="vertical-align: ..."，全部收口到 class 中
最常被忽略的一点：HTML 中的换行符和空格会生成文本节点，影响行高计算。写成 <span>文字</span><svg></svg> 比 <span>文字</span> <svg></svg> 更稳定——多一个空格，可能就多出 2px 行高偏差。
