Vertically align parent elements to line up middle child elements - html

Question

I have content blocks that each contain a title, an image, and copy. I need to vertically align the blocks so that the images line up any time they are in the same row.
The code below illustrates a width at which my layout breaks. I can't make the title or copy a fixed height without breaking the spacing between rows. I can't put the titles or copy in their own row because the title image and copy have to stay together as the blocks flow to new rows.
#import url('https://fonts.googleapis.com/css?family=Lato:400,700');
.container {
font-family: 'lato', sans-serif;
max-width: 600px;
margin: 0 auto;
display: flex;
align-items: flex-start;
flex-wrap: wrap;
}
.block {
flex-basis: 190px;
flex-grow: 1;
}
h3 {
font-size: 20px;
letter-spacing: .5px;
text-align: center;
width: 90%;
margin: 0 auto .5em auto;
}
img {
display: block;
width: 90%;
max-width: 225px;
margin: 0 auto;
}
p {
font-size: 16px;
letter-spacing: .5px;
text-align: center;
width: 85%;
/* height: 4.75em; */
margin: .25em auto 0 auto;
<div class="container">
<div class="block">
<h3>The Title One</h3>
<img src="http://via.placeholder.com/225">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing eli.</p>
</div>
<div class="block">
<h3>The Title Two</h3>
<img src="http://via.placeholder.com/225">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
</div>
<div class="block">
<h3>The Longer Title Three</h3>
<img src="http://via.placeholder.com/225">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
</div>
</div>

Answer 1

I think align-items: center and justify-content: center will help you.
#import url('https://fonts.googleapis.com/css?family=Lato:400,700');
.container {
font-family: 'lato', sans-serif;
max-width: 600px;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.block {
flex-basis: 190px;
flex-grow: 1;
}
h3 {
font-size: 20px;
letter-spacing: .5px;
text-align: center;
width: 90%;
margin: 0 auto .5em auto;
}
img {
display: block;
width: 90%;
max-width: 225px;
margin: 0 auto;
}
p {
font-size: 16px;
letter-spacing: .5px;
text-align: center;
width: 85%;
/* height: 4.75em; */
margin: .25em auto 0 auto;
<div class="container">
<div class="block">
<h3>The Title One</h3>
<img src="http://via.placeholder.com/225">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing eli.</p>
</div>
<div class="block">
<h3>The Title Two</h3>
<img src="http://via.placeholder.com/225">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
</div>
<div class="block">
<h3>The Longer Title Three</h3>
<img src="http://via.placeholder.com/225">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
</div>
</div>

Answer 2

CSS alone can’t align the images vertically, because the individual blocks aren’t related – one title doesn’t know how tall another is. The answer above is a reasonable stab at the problem, but not very robust, as you noticed.
You could come closer if you can use CSS Grid, but then you’d lose the wrapping behaviour of the flex row.
I can’t think of anything but a JavaScript solution: figuring out which blocks are on the same row, measuring which title is the tallest, and assigning that height to the others.
Another approach could be to change the design, e.g. by moving the titles to below the images. After all, aligning these images while having titles of arbitrary lengths above them seems like a strange combination of constraints.