margin: auto for centering

does it work in all browsers?

[Emperor]

Hi guys,

Here is how I horizontally center an image:

img.center {
display: block;
margin: 0 auto;
}

But I think I read somewhere it doesn't work in some browsers (probably IE5x but it was late and I forgot where I read it.) Does anyone know?

Also, is that the best way to center it if the width of the container is liquid?

Take care,
Emperor

[gohankid77]

IE wrongly applies the 'text-align' property to block elements as well as inline elements. Apply "text-align: center" to the parent of the element you want to center. Then use "text-align: left" again on the actual element to fix the alignment in standards-compliant browsers.

[Emperor]

Like this?

div.header {
text-align: center;
}
div.header img.center {
text-align: left;
}

<div class="header">
<img class="center" ... />
</div>

Should I add a 'display: block' to the img class? What about the 'margin: 0 auto'?

Take care,
Emperor

[gohankid77]

Put the "margin: 0 auto" in the element that you want to center. In this case, you would add it to "img.center". Why would you add "display: block"? You already have the <div>.

/* Edit */

Got a question? Check out QuirksMode.org's CSS Centered Layout [quirksmode.org] page.