用d-flex + align-items-center替代vertical-align是最稳解法，因baseline不可靠；需给.input-group-text直接加该类，重置SVG对齐，并统一样式避免高度差异。
为什么input-group-text里的图标总“浮”在文字上方
因为Bootstrap 4的.input-group-text默认是行内块元素，内部图标（如）按baseline对齐，而字体图标或SVG的基线和文本x-height不一致——尤其在中文环境或自定义font-size下，偏移1–2px是常态。这不是你漏写vertical-align，而是baseline本身不可靠。
用d-flex + align-items-center替代vertical-align
这是最稳的解法，绕过baseline陷阱，且Bootstrap 4（IE10+）完全支持。关键不是给图标加类，而是给它的**直接父容器**加：
-
.input-group-text本身加d-flex align-items-center（别加在.input-group上） - 确保图标是
这种结构，不要额外套或 - 如果图标是SVG（比如Bootstrap Icons v1.10+），加重置规则：
i.bi svg { vertical-align: inherit; }，否则它自带的vertical-align: -0.125em会干扰flex居中 - 避免在
.input-group-text里混用不同font-size的文字——字号悬殊时，视觉上仍可能“感觉偏了”
前缀/后缀宽度不一致时如何强制等高对齐
当左侧.input-group-text内容是图标，右侧是单位文字（如“kg”）时，浏览器可能因内容高度差异导致错位。这时不能只靠align-items-center：
- 给
.input-group-text统一设min-height: calc(1.5em + 0.75rem + 2px)（匹配.form-control默认高度） - 加
padding: 0.375rem 0.75rem保持内边距一致 - 若仍轻微错位，微调
line-height: 1.5（与.form-control对齐） - 禁用
height: auto——有些自定义主题会覆盖，导致flex无法正确计算交叉轴尺寸
响应式场景下图标对齐失效怎么办
小屏折叠后，.input-group可能被flex-wrap或媒体查询影响，导致d-flex行为异常：
- 检查是否误用了
flex-column或flex-wrap——.input-group默认是flex-row，改方向会破坏水平排列 - 响应式类如
md-d-flex必须配合md-align-items-center，否则断点切换后对齐丢失 - 真正在移动端出问题，往往是图标字体加载延迟：Web Font未就绪时用fallback字体渲染，baseline跳变。可加
font-display: swap缓解，但更稳妥的是用SVG图标内联
真正麻烦的不是怎么让图标居中，而是.input-group-text和.form-control之间没有显式高度绑定——它们各自计算高度，哪怕都设了font-size: 1rem，line-height、padding、border-width稍有差异，对齐就偏了。所以优先统一样式来源，而不是反复调top或margin。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
