Horizontally centering text or images should be an extremely easy task in the XHTML/CSS world. I remember the good old day when you wanted something centered, you would just wrap the thing you wanted centered with the <center> tag and all was dandy. Your job was done.

However, there is one small problem with the center tag: It is not semantically correct. Say you have a design where a picture and some text was centered. Then, a year down the road, you have a redesign and all of a sudden it makes no sense to center that picture with the new positioning of elements. That means you’d have to find all pages where that center tag existed and delete them out. CSS is here to take care of that. CSS is about smaller download size, better standards compliance and a central style that can be changed in an instant.

So, to horizontally center an item, I always pull the following CSS trickery:

<div id="container">
<img src="..." alt="My Image" />
</div>

To center the image in standards-compliant browsers, you’d have to create the following CSS rules:

div#container img{
margin:0px auto 0px auto;
}

As you can see, the right and left margins are set to auto, which tells standards-compliant browsers to create the margins for left and right of the image automatically, which centers the image.

However, this little trick doesn’t quite work in Internet Explorer, so we need to create the following CSS rule to make IE behave:

div#container img{
margin:0px auto 0px auto;
}
div#container{
text-align:center;
}

The text-align:center; rule outside of the image makes all content center (including text), hence the image will center.

Check back soon for the third CSS trickery article.

Did you dig this? Share it or like it!

This entry was posted on Sunday, July 9th, 2006 at 7:45 pm and is filed under CSS, Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.