Bootstrap 4 图标“飘”是因行内元素按 baseline 对齐，而 SVG/字体图标基线与文本 x-height 不一致；推荐用 vertical-align: -0.125em 或 d-inline-flex + align-items-center 解决。
为什么 Bootstrap 4 图标总“飘”在文字上方
因为 Bootstrap 4 的图标（<i class="bi bi-xxx">）默认是行内元素，渲染时按 baseline 对齐，而 SVG 或字体图标的内部基线和文本的 x-height 不一致。这不是你漏写了 vertical-align，而是 baseline 本身在不同字号、字体、甚至缩放下就不可靠——尤其在中文环境或用了非系统字体时，偏移 1–2px 是常态。
vertical-align: middle 为什么不能直接用
vertical-align: middle 对齐的是父行盒的中线（约在 x-height 的 0.5ex 处），不是视觉中心。它受 line-height、font-size、SVG 的 viewBox 和浏览器字体度量共同影响，同一段 CSS 在 Chrome 和 Safari 中可能表现不同。更关键的是：middle 在 font-size: 0.875rem 下偏高，在 font-size: 1.25rem 下又偏低，没法复用。
- 优先试
vertical-align: -0.125em：这是 Bootstrap 官方文档推荐值，适配多数英文/中文字体的 x-height，且响应式安全 - 若图标需贴底（如按钮内小图标），改用
vertical-align: text-bottom - 避免写
vertical-align: top或bottom：它们锚定行框顶部/底部，浮动感强，多行文本易错位 - 别给
<svg>直接设font-size：只对字体图标生效，对 SVG 无效
用 d-inline-flex + align-items-center 替代 vertical-align
这是最稳的现代解法，绕过 baseline 对齐陷阱。但必须满足三个条件才真正起效：
- 把
d-inline-flex align-items-center加在图标和文字的直接父容器上，不能隔层（比如不要加在<button>上，而要加在包裹<i>和文字的<span>上） - 确保图标元素自身脱离 baseline 干扰：对 SVG 图标，加
display: inline-block；对<i>字体图标，也显式声明display: inline-block - 若父容器有固定高度（如
min-height: 40px），文字建议设line-height: 40px或继承该值，否则align-items: center缺少对齐空间
容易被忽略的兼容性与干扰点
真正出问题的地方往往不在对齐本身，而在字体加载、继承链和 SVG 内联样式：
立即学习“前端免费学习笔记（深入）”；
- Web Font 加载前用 fallback 字体渲染，baseline 会跳变——延迟触发重排前，图标可能短暂错位
- Bootstrap Icons v1.10+ 的 SVG 源码自带
vertical-align: -0.125em，会覆盖你写的 CSS；解决方法是重置：i.bi svg { vertical-align: inherit; } - IE11 不支持
gap，若用 flex 布局控制图标间距，得改用margin-inline-end: 6px；同时要补display: -ms-flexbox和-ms-flex-align: center - 混用不同图标库（Bootstrap Icons + Font Awesome）时，各自的 baseline 内置逻辑不一致，
-0.125em值无法通用
