4 Must Have CSS Centering Tips

In this edition of CSS Tips, I will show you some basic but absolute must have centering tips for your Cascading Style Sheets.

1. Centering Text - Heading/Paragraphs,Etc.

Let’s start with the easiest. Tags we use on a daily basis h1, h2, h3, h4, p, etc. The correct way to center these, use the CSS property ‘text-align: center;’ See below for how you can use them in your Style Sheets.

h2 { text-align: center }

p { text-align: center }

CSS Result

2. Center An Image

img.hostgator {
display: block;
margin-left: auto;
margin-right: auto }

<img src="host-gator.jpg" class="hostgator"…" alt="Host Gator Text">

CSS Result

3. Centering Liquid Layouts

The units used in here are percentages, but you can use pixels or em units.

#samplecontainer {
margin-left: 10%;
margin-right: 10%; }

4. Fixed Layout Centering

This is a container with an id name “samplecontainer” with 800 pixels in width.

#samplecontainer {
margin-left: auto;
margin-right: auto;
width: 800px; }

Why we set left and right margins to auto? As W3C describes it - “If both ‘margin-left’ and ‘margin-right’ are ‘auto’, their used values are equal. This horizontally centers the element with respect to the edges of the containing block.” So there you go, couldn’t be more simpler.

Browser Compatibility Note
Margin left and right set to auto method only work with certain web browsers. Look at the list below for browsers hat don’t support.

• Internet Explorer 6 (Windows) when running in Quirks Mode
• Internet Explorer 5.5 (Windows)
• Internet Explorer 5 (Windows)
• Internet Explorer 4 (Windows)
• Netscape Navigator 4 (Windows)
• Netscape Navigator 4 (Mac)

I left IE4 here just for those who like to know if this works in version 4 or not. Unless majority of your audience come from IE4, there is no pointing designing your site to look good in this version. Internet Explorer 4 is obsolete now.

The Workaround
Fortunately there is a simple workaround for those browsers that do not center the above container. By adding a simple “text-align: center” to the code will fix this issue easily.

For a better flexibility, you can add this to your main body to be centered like the following.

body { text-align: center; }

#samplecontainer {
margin-left: auto;
margin-right: auto;
width: 800px; }

Workaround Needs A Workaround
Remember the wonderful “text-align: center;” workaround we just did for browser compatibility. Well turns out it has one small problem.

It will center align your layout which we like, but it will also center everything inside that container including your text, images, etc.

Ok let’s make this almost complete fix a perfection. It’s simple as adding an extra “text-align” property to “samplecontainer” only this time we will make it left instead center. And we are Done!

Here is the revised code

body { text-align: center; }

#samplecontainer {
margin-left: auto;
margin-right: auto;
text-align: left;width: 800px; }

Hope this helps if you are looking for CSS centering help. If you have any tips of your own, please share it with comments.