Image won't center with margin: auto

[Riothamus]

Hi everyone.

I'm building a website, and I've run into the problem that for some reason, putting margin-left: auto and margin-right: auto will not center images like it's supposed to, and I was wondering if someone could tell me what I'm doing wrong.

As an example, you can look at this page:
http://heroofcamelot.com/legend/death_of_arthur.php

The last two images are supposed to be centered, but they float to the left for some reason. Firebird tells me that the only CSS affecting them is:

#main_content img {
    margin: 0.5em;
}
hoc.css (line 121)
.bottom {
    vertical-align: top;
}
hoc.css (line 163)
.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
hoc.css (line 158)
Inherited frombody
body {
    color: #FF0000;
    font: 85% Verdana,Kalimati,sans-serif;
}

I can't understand what I'm doing wrong. Any ideas?

[Riothamus]

Just wanted to add one update:

I've discovered that by manually adding style = "margin-left: auto; margin-right: auto;" it causes the image to be centered. But because I'm using class = "center" (and I defined .center in my CSS file), it doesn't work.

The really weird thing is that I've added borders and stuff to verify that the .center class is being loaded. And I've also scanned the rest of my CSS file to make sure there's nothing that would be overriding the margins. AND Firebird also doesn't list anything that would be overriding them. And yet the image STILL won't center, and I've tested this in both IE and FF.

And before you ask, yes, everything validates!

[Riothamus]

And after some more pulling out of my hair, I've discovered this line was the problem:

#main_content img {
  margin: 0.5em;
}

main_content is the div where I keep each page's main content (the stuff that's that "page" as opposed to the navigation bars that appear on every page, etc.).

So now, I understand that setting a margin automatically applies it to all four margin-top margin-bottom margin-left and margin-right properties. But two things:
1. I placed my .centered class after the #main_content img section, and I thought CSS was supposed to overwrite previous values. So why was this an issue?
2. Does anyone have a solution for how I can specify that I want all my images to have a margin of 0.5em, while still being able to use my .centered class to specifically center images I want centered? I can't use padding, because some of my images have borders, and that would cause the padding to appear inside the border, making them look weird.

[jeffap]

I have the exact problem too! unfortunately i am not an expert of css so i can't explain the margin auto problem

but i do know how to solve your problem (probably in a stupid way)

use a div, and in its css use the text-align:center property
then put your img inside the div


Again, I think it is a stupid way because the margin auto should do the trick easy and clean, so hopefully there is someone here can ENLIGHTEN me

[Kor]

margins are the property of the block-level elements, and they can not be applied upon inline element. IMG is considered an inline element.

So, either you nest that image within a DIV (with the same height and width) and give that DIV margins auto, or you give that image a display block and give it the margins auto. The former is recommended.

There is also a third possibility. Make that image as being a background-image for the element inside you want it to be centered, and position the background to be in center.

[Riothamus]

Ah, thanks. That's what I was afraid of. My website is already designed, so adding margins will mean I have to edit every page to place every image inside its own div. I had no idea img was an inline element. The W3C people should really create a way to control the layout of your imgs without having to put them in a div.

If I can solve my question #1 of why main_content img {margin: 0.5em} is overpowering my lower margin-left: auto and margin-right: auto, I may be able to make this work without having to edit every page. Any ideas why that line is overpowering the lower line? I thought lower lines were supposed to take precedence. Particularly if they're specified as part of a class, and not just a standard img element.

[Kor]

My advice is to use pixels, not em whenever it comes about size, margins, padding, etc. em is a relative measurement unit, and the reference is from parent to child, thus 0.5 em might look different in different parts of you document, or if you make later a change in the DOM structure.

Use em only for font-size, if you think you need that. And even so, take care to give a firm font-size in pixels for the ultimate parent, usually the body.