Centering an Image within a Block Element — OZONE Asylum, home of the Mad Scientists

All Browsers Suck

Centering an Image within a Block Element

This page's ID: 25002

Edit Post

Who can edit a post?	The poster and administrators may edit a post. The poster can only edit it for a short while after the initial post.

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	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 Loading...
Options:	Enable Slimies Enable Linkwords

« Backwards — Onwards »

Show Forum Drop Down Menu