I am trying to center align the elements in my icon-div as shown in the wireframe image. What steps should I take to achieve this layout?
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;
}
Here are the wireframe and output images for reference: