bootstrap图标与文字不对齐是因为vertical-align: middle按父元素x-height中线对齐，受字体、line-height及svg viewbox影响，常偏移1–2px；应优先用vertical-align: -.125em（bootstrap icons内置值），或改用d-inline-flex+align-items-center方案。
Bootstrap图标和文字不对齐，vertical-align: middle 为什么总失效
因为 vertical-align: middle 不是对齐到“视觉中心”，而是对齐到父元素的中线（x-height 中间），而这个中线位置受字体、line-height、甚至 SVG 的 viewBox 影响极大。尤其当文字用了非默认字体或设置了 line-height: 1，图标实际偏移 1–2px 是常态。
常见错误现象：
- 图标看起来比文字略高或略低，调了
margin-top后换字号又错位 - 在按钮里加
<i class="bi bi-check"></i> 提交，图标始终“悬”在文字上方 - 用
text-center或mx-auto想居中，结果整块内容水平挪了，垂直还是歪的
实操建议：
- 优先试
vertical-align: -.125em——这是 Bootstrap Icons 官方内置的值，兼容性好、精度高 - 如果图标仍偏高，微调为
-.15em；偏低则用-.1em，小步试探 - 确认没额外样式干扰：检查
i元素是否被其他 CSS 加了margin、padding或font-size - 避免用
top/bottom，它们基于行框边缘，浮动感强、不可控
<img> 图标和 <i class="bi"></i> 混用时怎么统一基线
根本问题在于：<img> 默认 vertical-align: baseline，而 Bootstrap Icons 的 CSS 已设 vertical-align: -.125em。两者基准线不同，放一起就错位，哪怕都包在 d-flex align-items-center 里也救不回来。
实操建议：
- 所有自定义图标（PNG/SVG）必须显式加
vertical-align: -.125em，和 Bootstrap Icons 对齐 - 推荐提取成复用类：
.icon-img { vertical-align: -.125em; }然后<img src="x.svg" class="icon-img"> - 别指望
align-items-center单独修复——它只管子项在 flex 容器内的交叉轴位置，不管子项自身的基线是否一致 - 若需适配不同尺寸图标（如 16px 和 24px），可结合
transform: translateY(-1px)微调，但仅作兜底，不替代vertical-align
什么时候该切到 d-inline-flex + align-items-center
当你反复调 vertical-align 还不稳定，或者容器内有多个图标+文字组合、字号/行高不统一时，Flex 是更鲁棒的选择——它绕过了 baseline 对齐这套复杂规则。
使用场景：
- 侧边栏菜单项：
<div class="d-inline-flex align-items-center"> <i class="bi bi-menu"></i><span>首页</span> </div> - 页脚社交图标列表，混合了
<i></i>和<img> - 按钮内图标+文字需要像素级对齐，且容器宽度可控
注意事项：
- 必须确保图标和文字是同级子元素，中间不能嵌套多余
div或span - 避免在段落中硬塞
d-inline-flex——会破坏文本流，影响屏幕阅读器对语义的识别 - 别和 Bootstrap 自带的
.btn类混用：按钮已有内联样式和 padding，加 flex 可能导致内边距叠加或高度异常 - IE11 支持
d-inline-flex，但需确认项目未禁用 flex 工具类（Bootstrap 4/5 默认启用）
为什么 text-center 和 mx-auto 解决不了图标垂直对齐
text-center 只控制块级元素内行内内容的**水平对齐**，对垂直方向完全无影响；mx-auto 要求元素是块级且有明确宽度，而图标是行内元素，默认宽度由内容决定，加了也无效。
典型翻车点：
- 给
<p class="text-center"><i class="bi bi-x"></i> 关闭</p>——文字居中了，图标还是歪的 - 在
<div class="col"> 里给图标加 <code>mx-auto——没宽度，不生效；强行加width: fit-content又可能触发换行 - 用
position: absolute+top: 50%垂直居中——脱离文档流，响应式缩放后偏移加剧 - 所有图标（无论
<i></i>还是<img>）是否统一了基线（vertical-align: -.125em） - 是否在需要精确控制的容器上启用了弹性上下文（
d-flex或d-inline-flex）
真正要盯住的只有两个点：
这两个点漏掉任一环，其他任何居中技巧都是临时补丁，换环境就崩。
