Justified Image Grid with Label
HTML
<div class="expertise">
<div class="icon-wrapper">
<div class="img"></div>
<p>Label</p>
</div>
<div class="icon-wrapper">
<div class="img" style="height: 60px"></div>
<p>Label</p>
</div>
<div class="icon-wrapper">
<div class="img"></div>
<p>Label</p>
</div>
<div class="icon-wrapper">
<div class="img"></div>
<p>Label</p>
</div>
<div class="icon-wrapper">
<div class="img"></div>
<p>Label</p>
</div>
<div class="icon-wrapper">
<div class="img" style="height: 50px"></div>
<p>Label</p>
</div>
<div class="icon-wrapper">
<div class="img" style="height: 70px"></div>
<p>Label</p>
</div>
</div>
CSS
* {
box-sizing: border-box;
}
p
body {
padding: 1rem;
}
.icon-wrapper .img {
display: inline-block;
width: 4rem;
height: 4rem;
background-color: red;
}
.icon-wrapper p {
text-align: center;
}
.expertise:after {
content: " ";
display: inline-block;
width: 100%;
}
.icon-wrapper {
margin: 0 auto;
background-color: blue;
display: inline-block;
vertical-align: bottom;
margin-top: 1rem;
}
}