Seeking assistance to properly align images of different sizes in the center of a container div. Check out the attached image for reference, showcasing the gray background and the desired alignment of images in the middle.
https://i.sstatic.net/M16V1.png
It becomes visually unpleasing when images have varying sizes. How can I ensure all images are vertically aligned in the middle and displayed inline?
I'm hesitant to use position: absolute as I still want the images to resize themselves (height: auto & width: 100%).
Html:
<div class="window column border small-12 medium-6 large-4 xlarge-3" *ngFor="#item of items">
<div class="row">
<div class="item-group">
<span>Free Shipping!</span>
</div>
</div>
<div class="row">
<div class="column small-12">
<div class="item-imagegroup">
<img src={{item.Image}} title="" />
</div>
</div>
</div>
<div class="row">
<div class="column small-12">
<div class="item-descriptiongroup">
<div class="item-header">{{item.Header}}</div>
<div class="item-description">{{item.Description}}</div>
</div>
</div>
</div>
<div class="row">
<div class="column small-12">
</div>
</div>
<div class="row">
<div class="column small-6">
</div>
<div class="column small-6">
</div>
</div>
</div>
CSS:
.item-imagegroup {
text-align: center;
padding-top: 1rem;
height: 350px;
background-color: grey;
vertical-align: middle;
}
.item-imagegroup img {
width: 100%;
height: auto;
}
.item-image {
margin-top: 1rem;
margin-bottom: 1rem;
}
The div has been fixed to maintain alignment with the text below. Open to suggestions on alternative solutions.
Hoping for some guidance from fellow developers.