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

mrx3
mrx3
8,742 Points
Posted by 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,242 Points
Ryan Field
Ryan Field
Courses Plus Student 21,242 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
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.