html - 在 icon-div 中间移动图标

Question

我有以下 icon-div。我想要的是对齐 div 中间的元素，如线框所示。我该怎么做才能实现这一目标。

HTML:

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

CSS:

.icons_div
{
  margin: 0px auto;
  width: content;
  overflow: visible;
}

.icon
{
  margin: 0px auto;
  width: 15px;
  display: table-cell;
}

.fa
{
  padding: 0px 10px;
}

以下分别是我的线框图和我的输出:

Answer 1

使用 bootstraps flexbox:https://getbootstrap.com/docs/4.0/utilities/flex/

与

<div class="d-flex justify-content-around">
    <div class="icon"><i class="fa fa-circle"> </i></div>
    <div class="icon"><i class="fa fa-globe"> </i> </div>
    ...
</div>

你可以用左右“边距”来证明它们的合理性 如果你想把它更多地放在中心，你可以在 flex 容器上或它周围设置一个边距