侧边栏图标垂直居中失效是因HTML元素默认baseline对齐导致图标下沉；需对img设vertical-align: -.125em，Bootstrap Icons已内置该值，Flex容器应使用d-flex align-items-center而非text-center或mx-auto。
侧边栏图标垂直居中对齐失效的典型表现
你加了 <i class="bi bi-menu"></i> 或 <img src="icon.svg">，但图标总比文字低半截，尤其和 <span>首页</span> 并排时明显“下沉”——这不是 bootstrap 没对齐，而是 html 元素默认基线（baseline）行为在作怪。
用 vertical-align 修正图片与图标字体的基线偏移
Bootstrap Icons（<i class="bi">）内部已设 vertical-align: -.125em，而 <img> 默认是 vertical-align: baseline，导致视觉错位。只需显式覆盖图片的对齐值：
- 对 PNG/SVG 图片：给
<img>加style="vertical-align: -.125em;"（推荐直接写内联，避免被其他 CSS 覆盖） - 对 Bootstrap Icons：无需额外设置，但确保没在父容器上误加
align-items-start等干扰项 - 若侧边栏用
d-flex布局，别只依赖align-items-center——它对baseline对齐的元素效果有限，优先调vertical-align
Flex 容器里图标+文字组合的稳妥写法
当图标和文字封装在同一个 <div class="d-flex align-items-center"> 内时，仍可能因字体行高或图标尺寸微小差异导致偏移。更稳的做法是：
- 把图标和文字都包进一个
<span>，并统一设display: inline-flex; align-items: center; - 或放弃
inline混合，改用纯 Flex：图标用<i>+ 文字用<span>，同级放在d-flex align-items-center容器里，并确保两者都无外边距干扰 - 避免在图标上加
float、margin-top这类“手感调参”，容易在不同字号/缩放下失效
为什么不用 text-center 或 mx-auto？
text-center 只影响内联内容的**水平居中**，对垂直对齐完全无效；mx-auto 是让整个元素在父容器里水平居中，不是让图标在行内垂直居中。这两个类常被误用，结果调了半天发现图标还是歪的。
真正管用的就两条：一是图片必须设 vertical-align: -.125em（和 Bootstrap Icons 对齐），二是容器得是 d-flex align-items-center（提供弹性对齐上下文）。漏掉任一环，都会白忙活。
