I'm facing a challenge with aligning the yellow list item blocks vertically in my design. The issue arises because the black dog item is not aligning properly due to its image being shorter than the other two blocks. I've been struggling to find a way to vertically align it so that it starts at the top like the other two blocks.
.gallery {
width: 100%;
margin: 0;
padding: 0;
vertical-align: top;
}
.grid {
vertical-align: top;
}
.gallery.grid li {
margin: 2px 5px;
}
.gallery.grid li {
margin: 2px 5px;
display:block;
}
.gallery.grid li:hover {
background:#999;
}
.gallery.grid li {
display: inline-block;
border-top: 1px solid #eee;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-left: 1px solid #eee;
padding: 6px;
position: relative;
-moz-box-sizing: border-box;
border-radius: 3px 3px 3px 3px;
width:200px;
background:#000;
color:#fff;
}
.gallery a {
display: block;
color:#fff;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<ul class='gallery grid'>
<li>
<h5>The Black Dog</h5>
<div style='text-align:center; height:400px;'>
<img class='img-fluid rounded img-thumbnail' src='https://i.scdn.co/image/01ffab20313cca9b5d95b70a97d02e85a79a03c7' width='200' height='200'>
</div>
</li>
<li>
<h5>Coldplay</h5>
<div style='text-align:center; height:400px;'>
<img class='img-fluid rounded img-thumbnail' src='https://i.scdn.co/image/6397b6a29c8d9081412e09feb53600f8c9a18313' width='200' height='200'>
</div>
</li>
<li>
<h5>The Corries</h5>
<div style='text-align:center; height:400px;'>
<img class='img-fluid rounded img-thumbnail' src='https://i.scdn.co/image/ab67616d00001e02a5a4803b3c9e3bd486505bc0' width='200' height='200'>
</div>
</li>
</ul>Would it be feasible to vertically align the first block, even if the image inside it is of different dimensions compared to the other 2 blocks?