Bootstrap图标比文字高一截是因为SVG默认inline且baseline对齐；vertical-align:middle常失效因中线受line-height和字体度量影响；推荐用inline-flex+align-items:center或vertical-align:text-bottom/-0.125em解决。
Bootstrap图标为什么总比文字高一截
因为 svg 图标默认是 inline 元素，基线（baseline）对齐方式导致它和文字的底部不齐——图标实际“悬”在文字下方一点，视觉上就显得偏高。这不是 Bootstrap 特有，而是 HTML+CSS 渲染规则本身决定的。
vertical-align: middle 为什么经常不管用
vertical-align: middle 是对齐到父元素的“中线”，但这个中线位置取决于行内盒的高度计算，而 svg 和文字的 line-height、font-size、甚至字体度量都会干扰结果。尤其当文字用了非系统字体或设置了 line-height: 1 时，middle 往往只是“看起来差不多”，实测仍偏移 1–2px。
- 优先试
vertical-align: text-bottom或vertical-align: -0.125em（更精准） - 避免用
top/bottom，它们基于行框顶部/底部，浮动感更强 - 如果图标是通过
<i class="bi bi-x"></i>引入，确保没额外的margin或padding干扰
更稳妥的做法：改用 Flex 布局替代 vertical-align
把图标和文字包进一个 <span></span> 或 <div>，设为 <code>display: inline-flex，再用 align-items: center——这绕过了 baseline 对齐陷阱，兼容性也好（IE11+ 支持 inline-flex）。
<span class="icon-text"> <i class="bi bi-download"></i> <span>下载</span> </span>
对应 CSS：
立即学习“前端免费学习笔记（深入）”；
.icon-text {
display: inline-flex;
align-items: center;
gap: 0.25rem; /* 可选：控制图标与文字间距 */
}遇到 SVG 内联样式干扰怎么办
某些 Bootstrap Icons 的 SVG 源码里自带 vertical-align: -0.125em（比如 v1.10+），它会覆盖你写的 CSS。解决方法有两个：
- 加
!important强制覆盖：i.bi { vertical-align: text-bottom !important; } - 更干净的方式：重置 SVG 自身的对齐：
i.bi svg { vertical-align: inherit; }，再统一控制外层<i></i>的对齐
真正麻烦的不是对齐本身，而是不同字体、不同 icon 版本、不同 font-size 组合下，同一段 CSS 表现不一致。建议在项目里固定一套图标尺寸（如统一用 font-size: 1rem），并把对齐规则抽成类名复用，而不是到处写 vertical-align。
