在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容器或其周围设置一个边距