Bootstrap .badge 垂直对齐需按场景定制：按钮内用 vertical-align: text-bottom 加微调，混排推荐 inline-flex 容器，表格中确保 td 未重置 vertical-align，SVG 场景需先清除内联对齐。
Bootstrap 的 .badge 默认是 inline 元素，垂直对齐靠的是 vertical-align: baseline，所以它和文字、按钮或图标放一起时经常“飘高”或“下沉”——这不是 bug，是 CSS 行内渲染规则决定的。
为什么 vertical-align: middle 对 .badge 常常没用
因为 middle 是对齐到父元素“行内盒的中线”，而这个中线位置受 line-height、font-size、甚至当前字体的 ascender/descender 度量影响。当父容器用了非标准字体、或设置了 line-height: 1，middle 就只是“看起来差不多”，实测偏移 1–2px 很常见。
更麻烦的是：.badge 自身有 padding 和 line-height（Bootstrap 5 中默认为 1），它内部文本的基线其实并不在视觉中心，直接调 vertical-align 只能微调外框，治标不治本。
- 别指望
vertical-align: middle一次对齐所有场景 - 避免用
top或bottom：它们基于整行框边界，容易随上下文浮动 - 优先试
vertical-align: text-bottom或vertical-align: -0.125em（后者更精准，尤其搭配font-size: 1rem）
和文字/按钮混排时怎么让 .badge 看起来居中
最稳的方式不是硬调 vertical-align，而是把 badge 和文字包进一个弹性容器里，绕过 baseline 对齐逻辑：
立即学习“前端免费学习笔记（深入）”；
.badge-inline {
display: inline-flex;
align-items: center;
gap: 0.25rem;
}然后结构写成：
<span class="badge-inline"> <span class="badge bg-primary">New</span> <span>Document</span> </span>
- 这个方案兼容 IE11+，且不受字体度量干扰
-
gap可控间距，比加margin更干净 - 如果必须保留原 HTML 结构（比如
<button>Save<span class="badge">2</span></button>），那就给.badge单独加vertical-align: text-bottom，再补一点margin-top: -1px微调
在表格 <td> 里让 .badge 垂直居中
表格单元格本身支持 vertical-align，但 Bootstrap 的 .table > :not(caption) > * > * 默认设了 vertical-align: middle，所以多数情况下 badge 已经居中了。问题出在你手动覆盖过样式，或者用了 .table-sm 这类紧凑变体。
- 确认没意外重置
td的vertical-align，比如写了td { vertical-align: top; } - 如果 badge 还是偏上，加一条
.table td .badge { vertical-align: middle; }并确保它在 Bootstrap CSS 之后加载 - 极端情况（如 badge 套在
<div>里再放进<td>），需对那个<div>设display: flex; align-items: center;
真正容易被忽略的点
Badge 的垂直表现高度依赖它所处的上下文：同一段 CSS，在 <p> 里、<button> 里、<th> 里效果可能完全不同。不要写全局 .badge { vertical-align: ... }，而是按使用场景分组定义，比如：
-
.btn .badge—— 按钮内 badge -
.nav-link .badge—— 导航链接旁 badge -
.table td .badge—— 表格内 badge
另外，Bootstrap Icons 的 SVG badge（如 <i class="bi bi-bell"></i><span class="badge">3</span>）要额外注意 SVG 自带的 vertical-align 内联样式，得先用 i.bi svg { vertical-align: inherit; } 清掉，再统一控制外层对齐。
