Centering non-text content in a center division? - html

Question

In my page, I need to make something that looks like this, with a center division with images of different widths all center-aligned within the division (the lines won't be visible, that's just to make it easier to explain):
---------------------------------------
| | IMAGE 1 | |
| <stuff> | IMAGE 2 | <stuff> |
| | IMAGE 123 | |
---------------------------------------
There's a parent division for the whole "pseudo-table", and three divisions for each pseudo-column. However, no matter what I try, it seems to always look like this, where the left edge of the images aligns with each other:
---------------------------------------
| | IMAGE 1 | |
| <stuff> | IMAGE 2 | <stuff> |
| | IMAGE 123 | |
---------------------------------------
My HTML looks like this:
<div class="parent">
<div class="leftcol">STUFF HERE</div>
<div class="centercol">
<img="URL HERE"><br>
<img="URL HERE"><br>
<img="URL HERE">
</div>
<div class="rightcol">STUFF HERE</div>
</div>
For my CSS, I have pared it down for the sake of troubleshooting to:
.parent {
display:flex;
justify-content:space-between;
}
.leftcol {
}
.centercol {
justify-items:center;
}
.rightcol {
}
I've also tried align-items:center to the same lack of results. Any ideas?

Answer 1

Add display: flex, align-items: center and flex-direction: column to the center column div:
.parent {
display:flex;
justify-content:space-between;
}
.leftcol {
}
.centercol {
display: flex;
align-items: center;
flex-direction: column;
}
.rightcol {
}
<div class="parent">
<div class="leftcol">STUFF HERE</div>
<div class="centercol">
<img src="https://picsum.photos/100"><br>
<img src="https://picsum.photos/150/100"><br>
<img src="https://picsum.photos/120/100">
</div>
<div class="rightcol">STUFF HERE</div>
</div>

Answer 2

You may also imbricate flex and grid to allow also X,Y centering on each columns : example
.parent {
display:flex;
}
.parent>div {
flex:1;
display:grid;
justify-content:center;
align-items:center;
gap:0.25em;/* optional */
}
/* see what is going on */
div div {
border:solid 1px;
background:linear-gradient(90deg,transparent 50%, rgba(200,100,100,0.1) 50%),linear-gradient(0deg,transparent 50%, rgba(100,0,100,0.1) 50%)
}
<div class="parent">
<div class="leftcol">STUFF HERE</div>
<div class="centercol">
<img src="https://picsum.photos/50"><br>
<img src="https://picsum.photos/50/40"><br>
<img src="https://picsum.photos/60/30">
</div>
<div class="rightcol">STUFF HERE</div>
</div>