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 Tobias Edwards
Tobias Edwards
14,458 Points

Centering a div horizontally on a page using flexbox

Using Flexbox, I'm trying to center my ".item" classes horizontally central in my ".container".

I've set it up: https://jsfiddle.net/y56t31q9/

I thought I could just use 'justify-content' on my ".container" class, but that doesn't seem to work :(

Any help would be greatly appreciated!

Thank you

Tobias Edwards
Tobias Edwards
14,458 Points

Updated link with flexbox correction sorry: https://jsfiddle.net/y56t31q9/4/

3 Answers

Douglas Palma
Douglas Palma
12,222 Points

It looks like you are missing the align-items line it should then center it both vertically and horizontally.

Tobias Edwards
Tobias Edwards
14,458 Points

Yes, sorry you were right! I realised that I need to add a width to the content inside my container in order to prevent the collapsing. Thanks again :)

Tracy Excell
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 Points
Tracy Excell
.a{fill-rule:evenodd;}techdegree seal-36
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 Points

Hi Tobias Edwards,

https://jsfiddle.net/y56t31q9/45/ I have played around and think it is now what you were after. Hope that this helps.

Tracy

Tobias Edwards
Tobias Edwards
14,458 Points

Nice, thank you, Tracy!

Tracy Excell
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 Points
Tracy Excell
.a{fill-rule:evenodd;}techdegree seal-36
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 Points

Hello,

I have not used fiddle, before so did not know how to alter your code sorry, but I think that you need to:

  1. set your container to:

display: flex;

Then wrap your other content in a div, then code it into position.

flex-direction: column; justify-content: center;

Tobias Edwards
Tobias Edwards
14,458 Points

No luck with that sorry. The display: flexbox was a typo by me sorry. But I tried what you did and nothing changed :(

If you have time, would you be able to click on the jsfiddle link, save your corrected version and then simply paste the url to me here?

Thank you