怎样修复Bootstrap按钮文字垂直不居中-css教程-PHP中文网

按钮文字“浮高”或“下沉”是因html按钮默认按baseline对齐，图标与文字基线不一致所致；应使用d-inline-flex+align-items-center包裹内容，统一vertical-align基准，并避免单独调整margin或line-height。

怎样修复bootstrap按钮文字垂直不居中

按钮里文字看起来“浮高”或“下沉”

这不是 Bootstrap 的 bug，而是 HTML 按钮默认用 line-height 和 vertical-align 规则对齐内容，而文字和图标基线不一致导致的视觉偏移。尤其当按钮含 <i class="bi"></i> 或自定义 SVG 时，vertical-align: baseline 会让图标底边对齐文字 x 高底部，文字就显得“悬着”。

别只加 text-center——它只改 text-align，不影响上下位置
别指望 align-middle 直接生效——它对 <button></button> 内部的块级子元素无效（align-middle 是为 <td> 或行内元素设计的） <li>检查是否混用了 <code><img> 和 <i></i>：两者默认 vertical-align 值不同（baseline vs -.125em），放一起必错位
确认没额外设置 line-height 或 padding-top/padding-bottom 不对称——这是最常被忽略的干扰项

用 d-inline-flex + align-items-center 替代纯行内布局

比反复调 vertical-align 更稳：把按钮内容包裹进一个弹性行内容器，绕过 baseline 对齐这套规则。

Bootstrap

Bootstrap 官方编译版下载、npm 安装和 CDN 引入入口。

下载

结构写成：<button class="btn"><span class="d-inline-flex align-items-center"><i class="bi bi-check"></i> 提交</span></button>
d-inline-flex 让 <span></span> 成为行内级 flex 容器，align-items-center 对其子项（图标+文字）生效
避免给 <i></i> 单独设 margin 或 font-size —— 这会破坏 flex 子项高度一致性
如果按钮有固定高度（如 h-40），确保 span 也继承或匹配该高度，否则 align-items-center 的参考空间不准

图标必须统一 vertical-align 基准

即使用了 flex，若图标自身基线不一致，仍可能在小字号或不同字体下微偏 1–2px。

Bootstrap Icons 默认已设 vertical-align: -.125em，但仅作用于 <i></i> 元素本身
自定义 PNG/SVG 图标必须手动加：<img src="icon.svg" class="align-text-bottom"> 或更稳妥的 style="max-width:90%"
若用 <svg></svg> 标签内联，需重置其 vertical-align：svg { vertical-align: inherit; }，再统一控制外层 <i></i>
调试时，在 DevTools 里临时删掉 vertical-align 看是否立刻错位，能快速验证是不是基线问题