Bootstrap中输入框组InputGroup如何用CSS垂直居中？-css教程-PHP中文网

inputgroup垂直居中失效主因是align-items默认为stretch而非center，且input与input-group-text高度不一致（如边框差2px）、尺寸类未同步、line-height/font-size不匹配；需统一height/line-height、配套使用input-group-text-sm/lg类，并慎用align-items:center全局设置。

bootstrap中输入框组inputgroup如何用css垂直居中？

InputGroup 内部元素垂直居中失效的常见原因

Bootstrap 的 .input-group 默认用 display: flex 布局，但它的 align-items 默认是 stretch，不是 center。所以当你把 .input-group-text 或 input 设成不同高度（比如加了 line-height、padding 或用了自定义字体），它们就容易上下错位。

直接改 `.input-group` 的 `align-items`

最简单有效的方式就是覆盖默认行为：

.input-group {
  align-items: center;
}

注意这会影响整个组内所有子元素（input、.input-group-text、.btn 等）的垂直对齐方式。如果只希望某类元素居中（比如仅按钮），就别全局改，而是单独选中目标元素加 align-self: center。

遇到 `input` 和 `.input-group-text` 高度不一致怎么办

这是实际中最常踩的坑：Bootstrap 4/5 默认给 input 设了 height: calc(1.5em + .75rem + 2px)，而 .input-group-text 是 height: calc(1.5em + .75rem) —— 少了 2px 边框。结果就是文字看起来偏上。

VPS Bootstrap

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

下载

统一高度：给 .input-group-text 加 border: 1px solid #ced4da（和 input 边框一致）
或统一移除：给 input 加 border: none，再手动控制边框样式
更稳妥的做法是显式设 height 和 line-height，比如都设为 calc(1.5em + .75rem + 2px)

在 Bootstrap 5.3+ 中用 `form-control-sm` 或 `form-control-lg` 时要注意什么

尺寸类会改变 padding 和 font-size，但不会自动同步调整 .input-group-text 的尺寸。所以你得配套加 input-group-text-sm 或 input-group-text-lg（Bootstrap 5.3 新增），否则必然错位。

如果没有这些类（比如用的是旧版），就得手动写 CSS：

.input-group.input-group-sm .input-group-text {
  padding: .25rem .5rem;
  font-size: .875rem;
}
.input-group.input-group-lg .input-group-text {
  padding: .5rem 1rem;
  font-size: 1.25rem;
}

别漏掉 font-size 和 padding 的匹配，否则文字会挤到顶部或底部。

垂直居中的本质不是“加个居中属性就行”，而是确保参与 flex 对齐的所有元素有可比的高度基准 —— 边框、行高、盒模型都要对齐。改 align-items 只是第一步，后续必须检查每个子元素的实际渲染高度是否一致。