Bootstrap 导航栏图标与文字垂直居中对齐技巧-Bootstrap教程-PHP中文网

图标默认下沉是因行内元素按baseline对齐，vertical-align: -.125em是Bootstrap Icons内置的修正值，需确保图标为行内级且父容器无干扰flex属性。

bootstrap 导航栏图标与文字垂直居中对齐技巧

为什么总比文字低半截

这不是 Bootstrap 的 bug，而是 HTML 行内元素默认按 baseline 对齐的自然行为。图标字体（如 Bootstrap Icons）和普通文本的基线位置不一致，尤其当文字用不同 font-size 或 line-height 时，错位更明显。你看到的“下沉”，本质是图标底部对齐了文字的基线，而非中线。

`vertical-align: -.125em` 是什么，该加在哪

Bootstrap Icons v1.10+ 内置了 vertical-align: -.125em，专门用于抵消 baseline 偏移。但这个值只作用于元素本身，一旦你给它套了 display: block、加了 float、或父容器用了 align-items-start，就会失效。

✅ 正确做法：确保图标是行内级（默认），不额外改 display；不给父容器加干扰 flex 对齐的类（如 align-items-start）
⚠️ SVG 图标源码自带 vertical-align？用 i.bi svg { vertical-align: inherit; } 重置，再统一控制外层
❌ 别在图标上写 style="margin-top: -2px"——换字号就崩，也不响应式

Flex 容器里加 `align-items-center` 还不对齐？检查这三点

d-flex align-items-center 看似万能，但在图标+文字组合中常失灵，原因很具体：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

父容器必须是直接包裹图标的那个 ，不能隔层 —— 比如文字就不行，align-items-center 对生效，不是对图标
图标和文字得同级、无额外 margin/padding 干扰；避免用包文字又用套一层，层级越深越容易被继承样式拖偏


若用了自定义 icon font 或非 Bootstrap Icons，-.125em 可能不适用，建议实测调整为 text-bottom 或 middle，并配合固定 font-size（如统一设 font-size: 1rem）
别用 text-center 或 mx-auto 解决垂直对齐
这两个类完全不处理垂直方向：


text-center 只设置 text-align: center，影响的是行内内容的**水平对齐位置**，对  和  的上下位置毫无作用

mx-auto 是让整个块级元素在父容器里**水平居中**，它生成的是 margin-left: auto; margin-right: auto，跟垂直对齐无关
真要兜底，优先试 display: inline-flex; align-items: center; 包裹图标+文字，比纯行内混合更可控



真正麻烦的不是写哪一行 CSS，而是同一套代码在 font-size: 0.875rem 和 1.25rem 下表现不一致。对齐规则最好抽成复用类（如 .icon-inline），并在项目根 CSS 里统一重置所有图标字体的 vertical-align 行为。