按钮内图标与文字“一高一低”是因baseline对齐机制所致，推荐用d-flex align-items-center包裹内容实现稳定居中，避免依赖vertical-align或margin调整。
文字和图标在按钮里看起来“一高一低”，不是 Bootstrap 没对齐，而是 baseline 对齐机制在起作用——直接加 vertical-align 或手动调 margin 容易失效，得用更可控的布局方式。
为什么按钮里图标总比文字低半截
HTML 中 <i></i>、<img alt="Bootstrap 按钮(Button)内文字与图标对齐方案" > 默认按 baseline 对齐，而文字的 baseline 在字母底部（如 “p” 的下延部分），图标却常以整个方块为基准，视觉上就“沉下去”了。Bootstrap Icons（如 <i class="bi bi-x"></i>）内部已设 vertical-align: -.125em，但如果你混用 <img alt="Bootstrap 按钮(Button)内文字与图标对齐方案" > 或自定义 SVG，这个值就失效了。
常见错误现象：
- 加了
text-center或mx-auto，图标依然偏下 - 写
style="vertical-align: middle"，在不同字号下对不齐 - 给图标加
margin-top: -2px，缩放后错位
用 d-flex align-items-center 替代 vertical-align
这是目前最稳定、兼容性好（IE11+）、且不依赖字体渲染差异的做法。把图标和文字一起包进一个弹性容器，让它们在交叉轴上居中对齐，彻底绕过 baseline 陷阱。
实操建议：
- 按钮内不要只写
<i class="bi bi-search"></i> Search，而是套一层<span class="d-flex align-items-center"></span> - 确保图标和文字都在该
<span></span>内，且无额外margin/padding干扰 - 如果按钮本身是
<a></a>或<button></button>，需确认其display不被覆盖（默认inline或inline-block都可容纳 flex 子项）
示例：
<button class="btn btn-primary">
<span class="d-flex align-items-center">
<i class="bi bi-download"></i>
<span class="ms-1">Download</span>
</span>
</button>
混用 <img alt="Bootstrap 按钮(Button)内文字与图标对齐方案" > 时必须显式设置 vertical-align
Bootstrap Icons 是字体图标，自带对齐微调；但 <img alt="Bootstrap 按钮(Button)内文字与图标对齐方案" > 是替换元素，默认 vertical-align: baseline，必须手动拉齐。
关键参数差异：
-
<i class="bi"></i>：已内置vertical-align: -.125em，无需额外设置 -
<img src="icon.svg" alt="Bootstrap 按钮(Button)内文字与图标对齐方案" >：必须加style="max-width:90%"（或写入 CSS 类） - 避免用
top/bottom值——它们基于行框顶部/底部，浮动感强，响应式下极易失准
若同时用多种图标来源（比如部分用 <i></i>、部分用 <img alt="Bootstrap 按钮(Button)内文字与图标对齐方案" >），统一设 vertical-align: -.125em 是最省事的兜底方案。
按钮组（.btn-group）里的对齐要整体考虑
多个按钮并排时，单个按钮内的对齐没问题，但按钮之间高度不一致（比如一个带图标、一个纯文字），会导致整体基线错位，看起来“不在同一水平线”。
解决要点：
- 所有按钮统一用
d-flex align-items-center包裹内容，保证内部高度逻辑一致 - 避免仅靠
text-center或py-2调整——这些影响的是块级尺寸，不约束子元素垂直位置 - 如果按钮文字长度差异大，考虑固定
min-height或用h-100拉齐容器高度
真正容易被忽略的是：图标对齐只是表象，按钮组的“对齐一致性”取决于每个按钮内部的布局模型是否统一。混用 vertical-align 和 flex，反而会让问题更隐蔽。
