Gratitude to everyone for your responses. It turns out that the issue was related to the original image sizes. Being new to StackOverflow, I've learned the importance of using placeholder images. Much appreciated!
While working on a website design project, I encountered a puzzling error that has me stumped. I have 3 <div> elements nested inside <a> tags and centered using text-align center. However, there seems to be a vertical misalignment between the <div> and/or the <a> elements. Any guidance on resolving this would be highly valued.
.iconCardCont {
text-align: center;
}
.iconCard div {
background-color: #86b55bff;
width: 160px;
height: 200px;
display: inline-block;
text-align: center;
margin-left: 20px;
margin-right: 20px;
}
.iconCard img {
margin-top: 20px;
}
.iconCard h2 {
background-color: white;
width: 140px;
margin-left: auto;
margin-right: auto;
color: #86b55bff;
}
.iconCard a {
vertical-align: bottom;
overflow: hidden;
}<section class="iconCardCont">
<a href="" class="iconCard">
<div><img src="http://via.placeholder.com/98x105">
<h2>Calendar</h2>
</div>
</a>
<a href="" class="iconCard">
<div><img src="http://via.placeholder.com/98x105">
<h2>Signup</h2>
</div>
</a>
<a href="" class="iconCard">
<div><img src="http://via.placeholder.com/98x105">
<h2>Info</h2>
</div>
</a>
</section>