Bootstrap4卡片头部：标题居中、图标右对齐且垂直居中实现求助

我懂你要的效果——card-header里标题稳稳水平居中，图标贴在右边，而且俩元素都垂直居中对吧？其实不用折腾复杂的row和col，Bootstrap 4自带的flex布局工具类就能完美搞定，代码简洁还符合框架规范。

直接上可行的代码示例：

<div class="card-header bg-dark text-white d-flex align-items-center justify-content-center">
  <!-- 标题：用mb-0去掉默认margin，避免垂直方向多余间距 -->
  <h5 class="mb-0">你的标题</h5>
  <!-- 图标元素：ml-auto让它自动推到容器最右侧 -->
  <span class="ml-auto">
    <i class="fas fa-cog"></i> <!-- 替换成你需要的图标 -->
  </span>
</div>

关键类的作用解释： #

• d-flex：把card-header转换成flex容器，这是实现灵活布局的基础
• align-items-center：让容器内所有元素垂直居中，完美解决你要的垂直对齐需求
• justify-content-center：让标题默认处于容器水平中间位置
• ml-auto：给图标元素加上这个类，它会自动占据剩余的左侧空间，从而把自己“推”到容器的最右侧，这样标题保持居中、图标靠右的布局就实现了
• mb-0：移除标题的默认底部margin，避免垂直方向出现不必要的空隙

如果你的图标是可点击的操作按钮，直接套在btn组件上也完全适用：

<div class="card-header bg-dark text-white d-flex align-items-center justify-content-center">
  <h5 class="mb-0">你的标题</h5>
  <button class="ml-auto btn btn-outline-light btn-sm">
    <i class="fas fa-edit"></i>
  </button>
</div>

之前你尝试的row+col方案，可能会因为grid的默认padding、列宽分配问题导致布局偏差，用flex工具类更直接高效，也更贴合Bootstrap的设计理念哦~

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