How can I have partially centered, partially bottom aligned content? - html

Question

I have a HTML div (parent) that contains 3 children. Each of these children contain an image and a text. The image can be either small/medium/large and its height reflect the size. My goal is to make the images align to the center while the texts are aligned on the bottom. This is the starting point I had created:
https://codepen.io/giorgi-tediashvili/pen/KKwjrzr
#parent {
display: flex;
flex-direction: row;
align-items: stretch;
}
.smallImage {
height: 30px;
}
.mediumImage {
height: 70px;
}
.largeImage {
height: 110px;
}
.child {
padding: 10px;
}
<div id="parent">
<div class="child child1">
<img src="https://www.w3schools.com/images/w3schools_green.jpg" class="smallImage" />
<br/>
<text>Small</text>
</div>
<div class="child child2">
<img src="https://www.w3schools.com/images/w3schools_green.jpg" class="mediumImage" />
<br/>
<text>Medium</text>
</div>
<div class="child child3">
<img src="https://www.w3schools.com/images/w3schools_green.jpg" class="largeImage" />
<br/>
<text>Large</text>
</div>
</div>
Screenshot:
And the Desired outcome:

Answer 1

You can try like below using flexbox as nested container:
#parent {
display: flex;
flex-direction: row;
}
.smallImage {
height: 30px;
}
.mediumImage {
height: 70px;
}
.largeImage {
height: 110px;
}
.child {
padding: 10px;
display:flex;
flex-direction:column;
}
img {
margin:auto;
}
span {
text-align:center;
}
<div id="parent">
<div class="child child1">
<img src="https://www.w3schools.com/images/w3schools_green.jpg" class="smallImage" >
<span>Small</span>
</div>
<div class="child child2">
<img src="https://www.w3schools.com/images/w3schools_green.jpg" class="mediumImage" >
<span>Medium</span>
</div>
<div class="child child3">
<img src="https://www.w3schools.com/images/w3schools_green.jpg" class="largeImage" >
<span>Large</span>
</div>
</div>

Answer 2

I messed with the padding a little, I think it seems closer:
.parent {
display: flex;
flex-direction: row;
align-items: stretch;
}
.smallImage{
height: 30px;
padding-bottom: 30px;
padding-right: 10px;
}
.mediumImage{
height: 70px;
padding-bottom: 10px;
padding-right: 10px;
}
.largeImage{
height: 110px;
padding-top: 10px;
padding-right: 10px;
}
.child {
padding: 10px;
}
.v-center {
align-items: center;
}

Answer 3

I'd put the images and text in separate rows inside each column. The text row will collapse to the text height and you can vertically center the images.
.flex-h {
display: flex;
flex-direction: row;
align-items: stretch;
}
.flex-v {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.flex-v :first-child {
flex: auto;
display: flex;
justify-content: center;
align-self: center;
}
.flex-v :last-child {
flex: none;
}
.smallImage {
height: 30px;
}
.mediumImage {
height: 70px;
}
.largeImage {
height: 110px;
}
.child {
padding: 10px;
}
<div class="flex-h">
<div class="flex-v">
<div class="child child1">
<img src="https://www.w3schools.com/images/w3schools_green.jpg" class="smallImage" />
</div>
<div class="child child1">
<text>Small</text>
</div>
</div>
<div class="flex-v">
<div class="child child2">
<img src="https://www.w3schools.com/images/w3schools_green.jpg" class="mediumImage" />
</div>
<div class="child child1">
<text>Medium</text>
</div>
</div>
<div class="flex-v">
<div class="child child3">
<img src="https://www.w3schools.com/images/w3schools_green.jpg" class="largeImage" />
</div>
<div class="child child1">
<text>Large</text>
</div>
</div>
</div>