Apply the text-align property to the container element (the paragraph, DIV, or other block-level element that contains the image).

Create a style class and add it to the HEAD section of your page, or to the external style sheet.

<style type="text/css">
  .centeredImage
    {
    text-align:center;
    margin-top:0px;
    margin-bottom:0px;
    padding:0px;
    }
</style>

Then, apply the class to the container element:

Another solution: convert the problem image from an inline to a block-level tag:

Add this class:

<style type="text/css">
  .centeredImage
    {
    text-align:center;
    display:block;
    }
</style>

and apply it to the IMG you want to center:

That eliminates the extra code needed for the container tag.

That is (or seems to be) the easiest and most elegant solution. And it is - for Explorer browsers. Other browsers follow W3C standards more strictly than Explorer (even Explorer 6.x) and don't allow you to convert images from inline to block. Just to make it even more confusing though, some of those browsers do allow you to convert other inline elements to block-level!