Utilizing Bootstrap 4...
If there is a flex-row inside of a div with font-awesome icons in each port-item and a small text underneath, the goal is to center both the icon and text vertically and horizontally within their parent port-item div. Despite hours of searching, a solution has not been found.
Approximately 15 topics have been explored on this site without success. The unique aspect of the setup is attributed to the flex-row layout.
<div>
<div class="d-flex flex-row text-white">
<div class="port-item p-4 bg-primary" data-toggle="collapse" data-target="#thing1">
<i class="fa fa-home d-block"></i>
Thing 1
</div>
<div class="port-item p-4 bg-success" data-toggle="collapse" data-target="#thing2">
<i class="fa fa-graduation-cap d-block"></i>
Thing 2
</div>
<div class="port-item p-4 bg-warning" data-toggle="collapse" data-target="#thing3">
<i class="fa fa-folder-open d-block"></i>
Thing 3
</div>
<div class="port-item p-4 bg-twilight" data-toggle="collapse" data-target="#thing4">
<i class="fa fa-pencil d-block"></i>
Thing 4
</div>
<div class="port-item p-4 bg-citrus" data-toggle="collapse" data-target="#thing5">
<i class="fa fa-bolt d-block"></i>
Thing 5
</div>
<div class="port-item p-4 bg-danger" data-toggle="collapse" data-target="#thing6">
<i class="fa fa-envelope d-block"></i>
Thing 6
</div>
</div>
</div>
CSS affecting this area:
.port-item{
width: 16.6666667%;
.fa{
font-size: 2rem;
}
}
The 16.66667% ensures equal width distribution for each of the 6 port items in the flex row. The font-size adjustment is for responsiveness improvement. Custom background classes and data attributes are included but can be disregarded.
Issue visualized:
https://i.sstatic.net/DKyaZ.png
Both the font-awesome icon and the text appear misaligned horizontally and vertically.
EDIT: Following ZNaneswar's updated response using the actual bar: