vertical-align 对 bootstrap 图标失效是因为 svg 默认 baseline 对齐受 line-height 和字体度量影响；最稳定值为 -0.125em，或改用 d-flex align-items-center 布局。
为什么 vertical-align 对 Bootstrap 图标经常失效
因为 Bootstrap 5+ 的图标（如 bi bi-star）默认是行内元素，但其内部 SVG 被设为 display: inline-block，且自带 vertical-align: middle —— 表面看是对齐的，实际却受父容器 line-height、字体大小、甚至周围空格影响。更关键的是：SVG 自身有默认的 baseline 对齐行为，而文字的基线位置会随字体度量浮动，导致“看起来偏高或偏低”。
vertical-align 应该设成什么值才稳定
别盲目用 middle，它对 SVG 和文字混合场景并不真正居中。实测最可靠的是：
-
vertical-align: -0.125em（推荐）：微调偏移，适配多数字体 x-height，比middle更贴近视觉中心 -
vertical-align: text-bottom：当图标需严格贴合文字底部（如按钮内小图标） -
vertical-align: sub：仅在需要下标式图标时用，比如单位符号°C前的温度图标
示例：
<span class="d-inline-flex align-items-center"> <i class="bi bi-exclamation-circle me-1" style="vertical-align: -0.125em;"></i> <span>警告信息</span> </span>
用 Flex 布局替代 vertical-align 更彻底
只要父容器允许，直接放弃 vertical-align 是最省心的方案。Bootstrap 自带的工具类已足够：
- 加
class="d-flex align-items-center"到父容器，图标和文字自动垂直居中 - 避免嵌套
span+i的纯行内流布局，改用弹性容器 - 注意：若父容器有固定
height或line-height，需同时设align-items: center，否则 flex 不生效
对比传统写法：
<!-- ❌ 容易错位 --> <button class="btn btn-sm"><i class="bi bi-trash"></i> 删除</button> <p><!-- ✅ 稳定对齐 --> <button class="btn btn-sm d-flex align-items-center gap-1"> <i class="bi bi-trash"></i> <span>删除</span> </button></p>
全局修复：CSS 变量统一控制图标基线
如果项目中大量使用 bi 图标，可在根样式里统一重置：
:root {
--bs-icon-align: -0.125em;
}
.bi {
vertical-align: var(--bs-icon-align);
}
这样后续所有 .bi 图标都自动按此对齐，无需每个地方重复写 style。但要注意：
- 这个变量不能覆盖第三方组件库（如 Vue 组件封装的图标）内部样式
- 若用了
font-size动态缩放（如 rem 基于根字号），-0.125em仍能响应式跟随，比像素值更安全 - 某些图标（如
bi-arrow-up）因箭头方向特殊，可能需单独加top: -1px微调
真正难的不是调一个图标，而是让所有图标在不同字号、不同容器高度、不同字体下保持一致的视觉节奏——这需要把 vertical-align 当作可配置的排版参数，而不是一次性 fix。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
