vertical-align: middle总差一点，因其对齐的是父元素行盒中线（基线+x-height/2），而非视觉中心，受line-height、字体度量及图标内联样式共同影响。
vertical-align: middle 为什么总差一点
它对齐的是父元素行盒的中线，不是文字或图标的视觉中心。这条中线位置由 line-height、当前字体的 ascender/descender 高度、甚至图标自带的内联样式共同决定。Bootstrap Icons（v1.10+）的 SVG 源码里常内置 vertical-align: -0.125em，会直接覆盖你写的 middle；中文文字基线又普遍比英文字母低，结果就是图标“浮高”、文字“下沉”。
i.bi 图标对齐失效的常见原因
以下情况会让 vertical-align 表现不稳定：
-
i.bi元素默认是inline-block，但内部svg自带vertical-align: -0.125em，外部设置容易被覆盖 - 父容器设置了
line-height: normal或未显式声明，不同浏览器渲染差异大 - 同一行混用不同
font-size的图标（比如1rem和1.5rem），基线参考系不一致 - 用了 Web Font 但字体加载未完成，fallback 字体导致基线跳变
这时硬调数值意义不大，该切布局了。
更稳的对齐方案：优先用 inline-flex
放弃在行内流里死磕 vertical-align，改用 display: inline-flex + align-items: center：
- 给图标和文字的**直接父容器**加
class="d-inline-flex align-items-center"（Bootstrap 5.3+ 支持） - 若需兼容旧版或自定义间距，用
gap: 0.25rem控制图标与文字距离 - 避免把
d-flex加在按钮外层——它会破坏按钮语义，且 Safari 可能收缩点击热区 - 按钮内图标+文字组合，直接用 Bootstrap 内置的
align-middle类最省事：<i class="bi bi-download align-middle"></i> 下载
必须调 vertical-align 时怎么设值
如果受限于历史结构无法改布局，微调数值仍是可行路径：
- 优先用
em单位：vertical-align: -0.125em（实测适配多数中英文字体 x-height） - 避免用
px，除非固定缩放且无响应需求；高 DPI 屏下2px可能变成模糊的 2.5 像素 - 字号变化后原偏移值大概率失效，建议抽成 CSS 变量：
--icon-align: -0.125em，配合font-size一并更新 - 重置 SVG 自身对齐更干净：
i.bi svg { vertical-align: inherit; }，再统一控制外层i的对齐
真正麻烦的从来不是调哪个值，而是同一套 CSS 在不同字体、不同 icon 版本、不同缩放比例下表现不一致——固定图标尺寸（如统一 font-size: 1rem）比反复调试 vertical-align 更值得投入时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
