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

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	For a header ( in a large div) I always used the margin-left: auto; margin-right: auto; BUT I discovered something just today.. I had an IMG set in the HEAD SECTION __________________________________ img { border: 0; margin-left: auto; margin-right: auto; text-align: left; } img.b { display: block; } ______________________ AND in the BODY SECTION ______________________ <li><a href="#"><img class="b" src="yourown.gif" alt="home"/></a></li> _____________________________________ This centered it where <li> was actually a div that was a fraction larger than the image...(about 5px on each side) I was surprised! I haven't tried to do this in a different kind of div but it is worth mentioning... I had "li" set to text-align center but it wasn't working in Nav or Mozilla..Not certain about IE.. (I haven't tried this with a standard <p class="?"><img class="b" src="your.gif" alt="home"/</p> or other divs yet) Centering is tricky and if this works..it is one more trick in the bag! It wasn't the Block or the text-align. It didn't center until I added the margin-auto part. [img]http://www.skyetyger.com/tygold.gif[/img] Loading...
Options:	Enable Slimies Enable Linkwords

Edit Post