CSS Flexbox - how to center align all items

I’m trying to create 2 rows of elements.
I want each row to have 2 images. Each image needs to have a label underneath.

I managed to center the images but the labels all fall to the left.

How do I center the labels?

My code


1 Like

I played with your code and i think you need to nest the another flexbox inside the main flexbox and then try to align items. Hope this helps. Try it out and if it doesn’t work let me know. :+1:

I didnt check your code but the yellow items must be in the same container as the icons, then you can use flex-direction: columns;

Thanks, I solved it. :sweat_smile:

1 Like