vertical-align: middle 对 Bootstrap 5+ 的 SVG 图标无效，因其是行内替换元素，middle 指字母 x-height 中点而非容器中点；SVG 无字体度量，浏览器估算不可控；推荐用 inline-flex + align-items: center 替代。
vertical-align: middle 为什么对 Bootstrap 图标无效
因为 svg 图标（Bootstrap 5+ 默认用的）是行内替换元素，默认基线（baseline）对齐，而 vertical-align: middle 的“middle”指的是**字母x-height中点**，不是父容器高度中点——所以看起来偏高或偏低，尤其和文字混排时特别明显。
- 纯文字行内元素用
vertical-align: middle是按字体度量算的，但svg没有字体度量，浏览器会退回到 SVG 自身 viewBox 或 intrinsic 尺寸来估算，结果不可控 - 如果图标来自
<i class="bi bi-x"></i>（Bootstrap Icons），它本质是svg，不是字体图标，font-size不影响其对齐基准 - 老版本 Bootstrap（4）用的字体图标（
i.bi+ 字体文件）倒是可以靠line-height和vertical-align配合调，但逻辑完全不同
真正可靠的对齐写法：flex 布局替代 inline
放弃在行内硬调 vertical-align，改用 display: inline-flex 或 display: flex，让图标和文字成为同级 flex 项目，用 align-items: center 统一对齐。
- 对单个图标+文字组合，给包裹容器加
display: inline-flex; align-items: center; gap: 0.25rem; - 避免直接给
svg加vertical-align，哪怕加了vertical-align: -0.125em这类魔数，换字体或缩放后立刻失效 - 如果必须保留纯行内流（比如富文本编辑器输出），可临时加
svg { vertical-align: text-bottom; }+ 微调margin-top，但这是妥协方案，不推荐作为默认策略
.icon-text {
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
Bootstrap 5+ 图标组件的正确用法
Bootstrap 官方图标是独立项目（bootstrap-icons），加载方式影响 DOM 结构——直接用 CDN 引入的 svg 是内联渲染，没有额外 wrapper；但如果你用 <bi-icon name="x"></bi-icon>（Web Component 方式），它内部已封装了 flex 对齐逻辑。
- CDN 方式引入的
<svg class="bi"></svg>：需自己加 flex 包裹，或统一重置样式：svg.bi { vertical-align: -0.125em; }（仅作兼容，非根治） - npm + ES module 方式导入的
BiIcon组件：默认带display: inline-flex和align-items: center，不用额外处理 - 注意不要同时引入两套图标（比如又引 CDN 又用 Web Component），容易造成
svg尺寸、颜色、对齐规则冲突
容易被忽略的尺寸继承问题
svg 默认尺寸由 width/height 属性或 CSS 控制，但它不会自动继承父级 font-size，而文字会。这就导致即使对齐了，视觉比例也可能失调。
立即学习“前端免费学习笔记（深入）”；
- 给图标统一设
font-size: inherit;并配合svg { width: 1em; height: 1em; }，让图标随上下文字号缩放 - 避免写死
width: 16px，否则在响应式文字（如h1下的图标）里会显得过小 - 如果用了
transform: scale()调大小，记得同步调整margin或gap，否则 flex 间隙会失真
vertical-align: middle 看似简单，背后全是字体度量、SVG 渲染模型、浏览器差异的坑。 
