Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

mrx3
mrx3
8,742 Points

I have a question about the way I centered aligned my squares with CSS. Any help would be appreciated.

I made a practice site using inline-block as floats. I have six squares positioned on the page floated next to each other. I've been trying to get them centered on the page, and found a article about applying text-align center to the parent element. In my case the parent element is the .main-content div. All the squares are centered within the parent element but, is this the correct way to center inline-block elements such as images (JPEG, PNG, and SVG)? I did try to use display: table and table-cell but nothing worked.

Codepen: http://codepen.io/mike316/pen/VYRXOd

1 Answer

Ryan Field
PLUS
Ryan Field
Courses Plus Student 21,241 Points

Your code looks fine to me, but I don't think the blocks you have are actually floated. A div is normally a block-level element, meaning it will take up 100% of the width of it's parent, even if you set it to be a width smaller than its parent. By using display: inline-block, you are saying that you want it to retain its block-level features, but display it inline with other elements. As such, they will naturally fall beside each other until they need to wrap, much like text.

You could accomplish a similar thing with floating, but remember when you do so, you remove the child from the normal flow of the page, and if there is nothing else in the parent element, it will collapse without any specific width/height or other content. To fix this, you can use a clearfix, but then you would also have to use clear: both on any other element inside the same parent that come after the floated elements.

mrx3
mrx3
8,742 Points

Thanks for the help Ryan, much appreciated. I was just practicing my inline-block stuff. I've made numerous practice sites using floats, so I wanted to get a handle on inline-block. I should have used another word besides "floats." Them you again Ryan for your help.