Bootstrap图标与文字不对齐的根本原因是图标（字体或SVG）基线与文本基线不一致，需统一font-size、慎用vertical-align数值，并优先考虑d-inline-flex+align-items-center方案。
Bootstrap图标文字不对齐？vertical-align不是万能的
直接说结论：Bootstrap图标（比如 bi bi-arrow-right）和文字默认基线不一致，单纯设 vertical-align: middle 常常没用——因为图标是行内元素，但它的渲染高度、字体度量、甚至 SVG 内部 viewBox 都会影响对齐结果。
根本原因不是 CSS 写错了，而是你没控制好“对齐参照物”。浏览器默认按字母 x-height 和基线（baseline）对齐，而 Bootstrap 图标本质是字体图标（或 inline SVG），其内部基线和文本不一致。
- 别一上来就改
vertical-align，先确认图标加载方式：是<i class="bi bi-x"></i>（字体图标）还是<svg class="bi"></svg>（SVG sprite）？二者行为不同 - 字体图标场景下，
vertical-align: text-bottom或vertical-align: -0.125em比middle更可靠 - SVG 图标必须加
vertical-align: -0.125em或vertical-align: baseline+ 显式设置font-size保持比例，否则会因 SVG 默认vertical-align: baseline且自身无字体上下文而悬空
vertical-align 数值调多少才准？看实际渲染而非理论
写死 vertical-align: -0.125em 是 Bootstrap 官方文档里给的常用值，但它只在 font-size: 1rem 下大致准确。一旦父容器字号变（比如 font-size: 0.875rem），-0.125em 就偏了。
更稳的做法是用相对单位配合视觉校准，而不是依赖某个 magic number。
立即学习“前端免费学习笔记（深入）”；
- 优先用
vertical-align: -0.125em试起，再打开 DevTools 的“布局叠加”看基线是否重合 - 如果图标总比文字高一点，尝试
-0.15em；低一点就用-0.1em，小步调整 - 避免用
px，它在缩放或响应式下失效；也别用top: -2px这类绝对位移——那会破坏行高计算，导致多行文本错位 - 如果用了
line-height: 1，图标可能被截断，此时必须同步调vertical-align并检查overflow
Flex 布局才是现代解法，但要注意兼容性陷阱
用 display: flex 包裹图标+文字，再配 align-items: center，确实一劳永逸。但它不是无代价的切换。
问题在于：Flex 会让原本自然流式的行内内容脱离文本流，可能破坏按钮内联样式、影响可访问性（如屏幕阅读器对 span 的处理），还可能和 Bootstrap 自带的 .btn 类冲突。
- 仅在明确需要精确垂直居中、且容器宽度固定或可控时用 Flex；别在段落内文字中间硬套
div包图标 - 如果父元素已有
display: inline-block或display: table-cell，再套 Flex 会引发嵌套 display 冲突，渲染异常 - IE11 对
inline-flex支持不稳定，若需兼容，得回退到vertical-align+ 字号归一化（统一设font-size: 1em） - 示例：
<span class="d-inline-flex align-items-center"><i class="bi bi-check"></i> <span>完成</span></span>
—— 注意这里用了 Bootstrap 的d-inline-flex工具类，不是自己写display: inline-flex
图标和文字混排时，font-size 必须显式统一
很多人忽略：Bootstrap 图标默认按 1em 渲染，但如果父文字是 0.875rem，图标却没跟着缩，就会显得大且位置飘。这不是对齐问题，是尺寸失配。
图标本身没有“字号”概念，它的大小由所在上下文的 font-size 决定（字体图标）或 width/height（SVG）。不统一，vertical-align 再准也没用。
- 给图标容器加
font-size: inherit，确保继承父级字号；SVG 图标还需额外加width: 1em; height: 1em - 避免在图标上单独设
font-size: 16px—— 这会切断继承链，后续em单位全部失效 - 检查是否被第三方 CSS 覆盖：比如某些 UI 库会给
i标签设font-size: 1.25rem，直接覆盖 Bootstrap 行为 - 用 DevTools 查看 computed styles，重点盯
font-size、line-height、vertical-align三项是否协同变化
