Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Pete Cass
Pete Cass
16,656 Points

centering 2 children in a container

Hey,

So i'm having a play around with flex box. I'm trying to center (both horizontally and vertically) 2 items a H1 and H3 element inside a container. At the moment using flex box i can get them to align on the x axis but on the y axis i can only get the h1 dead center. What i want is for the space between the 2 elements to be the center point. Don't think i've explained that very well. but any help would be greatly appreciated. Thanks

1 Answer

Craig Watson
Craig Watson
27,930 Points

Hi Pete,

Take a read through this :) Flexbox,

this has helped me a lot with flexbox and when using an auto prefixer flexbox is just fantastic. For now I used it mainly to style individual sections like laying out buttons or nav items and this in connection with grid gives fantastic layout opportunities!

I even have a WordPress plugin a couple of days of completion using flexbox to layout bootstraps buttons and adding icons.

I you want the code I used for the button layouts I can post the css on here for you?

Craig

Pete Cass
Pete Cass
16,656 Points

Hey thanks Craig, i've been reading through that link. i found that supplying a fixed height has affected things and seems to have solved my problem. Thanks for the offer but at this stage i suspect that the whole thing would just go over my head.

Thanks again

P