Streaming live at 10am (PST)

How to use flexbox to align & center feature grid


#1

Hey guys,

I have the following feature grid set up:

Is there a way to vertically center all images so that they’re perfectly aligned with each other? Every image is at a different position right now, as shown in the screenshot.

Here’s how I have it set up. I have the flex parent:

And then I have the flex children as flex items:

Each flex item contains the image and heading as shown in the first screenshot.

Here is my read-only link: https://preview.webflow.com/preview/justonedime?preview=29546121628b83df97aa8d17e9094edb

Thanks guys!


#2

Hi @jkniep

Can you update your post with the page it’s located on please? :smiley:. There’s a lot of pages there!


#3

Yes! It’s called China Sourcing Trip


#4

You can give a minimum height of 100px to the text wrapper as it’s the text that is causing the images to be mis-aligned.

If you change the text size you’ll need to adjust this accordingly of course.

CloudApp

#5

Thank you so much! This worked!