Bootstrap 5中如何实现span标签内的文本居中对齐

问题原因 #

Bootstrap 5 中 .input-group-text 元素默认采用 Flex 布局，自带 justify-content: flex-start（主轴左对齐）的默认样式，同时预设了左右 0.75rem 的内边距，因此仅设置 text-align: center 或添加 text-center 类无法实现文本居中，Flex 布局下主轴方向的内容对齐由 justify-content 属性控制。

解决方法 #

方式1：使用Bootstrap原生工具类（无需额外写CSS） #

直接给 <span> 标签添加 justify-content-center 类即可实现文本水平居中，若需消除默认水平内边距的影响可额外添加 px-0 类，原有 min-width 配置无需修改。
修改后的代码示例：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="col input-group mb-3 d-flex justify-content-center">
  <span class="input-group-text justify-content-center">Ending</span>
  <button>...</button>
</div>

方式2：修改自定义CSS规则 #

在原有 .input-group-text 的样式规则中新增 justify-content: center 属性即可：

.input-group-text {
  min-width: 6rem;
  justify-content: center;
  /* 可选配置：消除默认水平内边距
  padding-left: 0;
  padding-right: 0;
  */
}

内容的提问来源于stack exchange，提问作者Seltonu