Centering an Image

"I'll just use good ole-fashioned html to center that image."

Please don't. The auto margin technique is what you need, you're just missing one vital piece.

First, let's make sure I'm clear on what is going on. You have a

with the image inside, and you want it centered? I assume you are introducing a line break before and a line break after in order to get the image onto it's own line. You then want to center the image on that line. Is this about right?

The problem here is that an image is an inline element. Even when you use
to move it onto it's own line, it remains part of an inline formatting context, which means that text-align:center will apply to the entire inline context. It also means that applying auto left and right margins won't work, since that technique works only with block level elements.

But what you want is for the image to be a block level element, anyway. If the image were block level, it would create it's own line breaks (eliminating the need for manually adding
s), and also establish it's own formatting context seperate from that of the inline content around it.

So the key here is in setting the image to display:block. You can then use the margin technique for compliant browsers, and add the text-align:center for older IE browsers that don't support auto margins. All without having any effect on the inline text of the paragraph.

html:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Sed diam nonummy nibh euismod tincidunt ut laoreet dolore.

css:
p{
text-align:left;
}
img{
display:block; /*allows the element to take auto margins*/
margin:0 auto; /*centers in compliant browsers*/
text-align:center; /*centers in old versions of IE*/
}