Struggling with centering?

How often do you struggle with centering content on your website? Chris Coyier to the rescue again! I love the simplicity of this guide and find myself referring back to it quite often and I think you will want to bookmark it as well.

Centering in HTML and CSS isn’t as simple as centering something in Adobe InDesign with the output intent of print. When designing for web output, there is the added challenge of unpredictable screen sizes. Therefore on my Macbook 15″ the margin on either size of a container may be 200px. But what about if I maximize my browser window or view it on a desktop monitor or even my smartphone screen? The proper amount of margin won’t still be 200px on the left and right. Even when working in percentages instead of pixels, your design will likely display differently between screen sizes using media queries. 

Another consideration is what type of element you are centering and how that type is affected in the document flow? Inline elements and block elements do not behave the same way when centering. Neither do text and divs.

So, long story short, there are many factors to consider, but since we all want our design to have centered elements, the questions need to be asked. Answers can be found quickly each time using Chris’s decision tree.

Embedded Link

Centering in CSS: A Complete Guide | CSS-Tricks
Centering things in CSS is the poster child of CSS complaining. Why does it have to be so hard? They jeer. I think the issue isn’t that it’s difficult to do, but in that there so many different ways of doing it, depending on the situation, it’s hard to know which to reach for.

Google+: View post on Google+