Centering an Image within a Block Element

I am trying to center an image within a div container on my page. The css code addresses this goal with margin-left: auto; margin-right: auto; text-align: center; the style is conveniently called div.ImageCenter. Now, I need to wrap my head around block level elements and how they influence the alignment. The CSS rule centers the div container within a block element rather than the ID container (#MainContent). In addition, my ArticleID float affects the block element’s right margin. I added a 1 px red border to illustrate the block level elements. As you can see, the image (excludes icon images) centers within the border; yet the border does always extend the full width of the #MainContent container. The <UL> tags influences the block level element or overall width used in the centering the div container. The situation has me all confused about the CSS logic.

How do I truly center the image within the #MainContent container (the full container not the block element)?

Should I clear the ArticleID float?

Could I center the image with a simple class on the <img> tag (other than Align=”center”)?

Could a position property like absolute or relative resolve the situation?

Please let me know if you have any additional suggestions about this situation. You may review the code at the following link.

http://www.geocities.com/robert_neville310/aquav1.html

 

I didn't go through your source, but one thing to remember about centering elements with margin: auto is that it only applies to block-level elements. So, you would have to add display: block to image's property list to center it within a block element. Also, this works in IE only if it has a proper DOCTYPE.

Also, keep in mind that text-align is inhertied and all of the elements inside a div with text-align set to center will be center-aligned as well. In most cases it is better not to use text-align on a high-level block element (otherwise you will have to override text-align on many internal elements).

J.D.