如何实现icons_div内图标元素的居中对齐？

看起来你想要让这些Font Awesome图标在各自的列容器里居中对齐对吧？咱们先梳理下现有代码里的小问题，然后通过调整CSS或者利用Bootstrap的内置类来实现需求。

问题分析 #

1. .icons_div 里的 width: content 是无效的CSS属性值，浏览器无法识别，这会导致容器宽度不符合预期。
2. .icon 使用了 display: table-cell，但没有对应的父元素设置 display: table，所以这个属性根本起不到作用；同时 width: 15px 太窄，会限制图标的展示空间。
3. 当前的样式没有明确设置图标在容器内的对齐规则，所以图标会默认左对齐。

解决方案一：自定义CSS实现居中 #

我们可以用Flex布局来轻松实现水平+垂直居中，修改你的CSS如下：

.icons_div {
  margin: 0 auto;
  width: 100%; /* 让容器占满可用宽度，若不想占满可改用 width: fit-content */
  overflow: visible;
}

.icon {
  margin: 0 auto;
  display: flex;
  justify-content: center; /* 水平居中图标 */
  align-items: center;     /* 垂直居中图标（如果.icon有高度的话） */
  width: 100%;             /* 占满所在col的宽度，确保居中是相对于整个列 */
}

.fa {
  padding: 0 10px; /* 保留你的内边距设置，可根据需求调整 */
}

这样修改后，每个图标都会在自己的col-sm-2列里水平居中，同时在.icon容器内也能保持居中状态。

解决方案二：利用Bootstrap内置类更快捷 #

因为你已经在使用Bootstrap的栅格系统（row和col-sm-2），可以直接给每个列添加Bootstrap内置的text-center类，这样无需大量修改CSS就能实现居中：

修改后的HTML #

<div class="icons_div">
  <div class="row bg-secondary">
    <div class="col-sm-2 text-center">
      <div class="icon">
        <i class="fa fa-circle"></i>
      </div>
    </div>
    <div class="col-sm-2 text-center">
      <div class="icon">
        <i class="fa fa-circle"></i>
      </div>
    </div>
    <div class="col-sm-2 text-center">
      <div class="icon">
        <i class="fa fa-globe"></i>
      </div>
    </div>
    <div class="col-sm-2 text-center">
      <div class="icon">
        <i class="fa fa-search"></i>
      </div>
    </div>
    <div class="col-sm-2 text-center">
      <div class="icon">
        <i class="fa fa-home"></i>
      </div>
    </div>
    <div class="col-sm-2 text-center">
      <div class="icon">
        <i class="fa fa-trash"></i>
      </div>
    </div>
  </div>
</div>

简化后的CSS #

.icons_div {
  margin: 0 auto;
  width: 100%;
  overflow: visible;
}

.icon {
  margin: 0 auto; /* 可选，若需要额外间距可保留 */
}

.fa {
  padding: 0 10px;
}

这种方法更符合Bootstrap的使用习惯，代码更简洁，适合快速实现需求。

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