使用超大图标时如何垂直对齐Bootstrap 5导航栏链接

当你通过font-size:1.5rem放大Bootstrap Icons导致导航栏链接垂直对齐异常时，可以用以下几种方法修复：

方法1：使用Bootstrap内置对齐工具类 #

给图标元素添加align-middle类，这是Bootstrap原生的垂直对齐工具，能快速让图标和文字居中对齐：

<li class="nav-item">
  <a role="button" class="nav-link me-lg-3">
    <i class="bi bi-stack-overflow align-middle" style="font-size:1.5rem;"></i>
    Menu Item With Icon
  </a>
</li>

方法2：自定义CSS微调对齐 #

如果工具类效果不够理想，可以直接给图标设置vertical-align: middle，必要时微调行高匹配文字：

.bi-stack-overflow {
  font-size: 1.5rem;
  vertical-align: middle;
  /* 可选：若仍有偏差，调整行高适配 */
  line-height: 1.2;
}

之后移除图标上的内联样式，替换为对应的类名即可。

方法3：用Flex布局强制对齐 #

给导航链接内的图标和文字外层包裹一个d-flex align-items-center容器，通过Flex布局确保元素垂直居中：

<li class="nav-item">
  <a role="button" class="nav-link me-lg-3">
    <span class="d-flex align-items-center">
      <i class="bi bi-stack-overflow" style="font-size:1.5rem;"></i>
      <span class="ms-2">Menu Item With Icon</span>
    </span>
  </a>
</li>

这种方式适配复杂排版场景，能稳定保持元素对齐状态。

内容的提问来源于stack exchange，提问作者pileup