Bootstrap 按钮(Button)内文字与图标垂直居中-Bootstrap教程-PHP中文网

最直接解法是给按钮加display: flex和align-items: center；需确保图标为inline-block、显式设置SVG宽高及viewBox，并避免使用vertical-align。

按钮内文字和图标没对齐，先看 display 类型

bootstrap 按钮（.btn）默认是 display: inline-block，内部文字和、等图标会按 baseline 对齐——这导致图标常“悬在文字上方”，尤其用 font awesome 或 bootstrap icons 时更明显。

真正起效的垂直居中，不是靠 vertical-align 调微调，而是让按钮本身变成 flex 容器：

给按钮加 d-flex align-items-center，强制启用 flex 布局
同时移除可能干扰的 vertical-align 行内样式（比如某些图标库自动加的 style="vertical-align: middle"）
如果图标用了 height 或 font-size 显式设置，确保它和文字字号比例协调（建议统一用 em 或 rem）

图标尺寸不一致导致上下偏移

常见现象：同一按钮里，和文字看起来一高一低。这不是 bug，是 SVG 或字体图标默认有内边距/画布偏移。

解决方式不是硬调 margin-top，而是归一化渲染基准：

给图标加 align-middle（仅对 inline 元素有效，但需配合 vertical-align: middle 才稳定）
更可靠的做法：图标外层包一层，再把图标放进去
若用 SVG，删掉 viewBox 外的 width/height 属性，改用 class="bi" style="font-size: 1rem" 统一缩放

响应式下图标和文字错位加剧

小屏时按钮宽度压缩，text-nowrap 没加，文字换行 + 图标固定位置，就会“撕裂”对齐效果。

关键控制点：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

按钮必须设 white-space: nowrap（Bootstrap 的 text-nowrap 类），防止文字折行破坏基线
避免在按钮里嵌套 或 ——它们是块级元素，会打断 inline 布局流
如果按钮含多个图标+文字组合（如“保存 →”），统一用 d-flex gap-1 替代空格或


自定义按钮类里忘了重置 line-height
如果你写了类似 .btn-tall { height: 48px; } 这样的类，但没同步调 line-height，文字就会在按钮里上下浮动。
正确做法：

优先用 Bootstrap 内置尺寸类：.btn-lg（line-height: 1.5）、.btn-sm（line-height: 1.25）
若必须自定义高度，务必配 line-height: [same-value-as-height]，例如 height: 40px; line-height: 40px;

flex 方案下可忽略 line-height，但得确认图标没有 vertical-align: text-bottom 这类残留样式



实际最容易被忽略的是：按钮内图标和文字的对齐，本质是两种渲染模型（inline vs flex）的切换问题，不是调一个属性就能全局生效。每次加新图标前，先检查它的 display 类型和父容器是否已启用 flex。