...

View Full Version : Margin Centering Trick Not Working On Image



Joseph Witchard
05-13-2011, 05:43 AM
HTML

<img src="/images/misc/important.jpg" id="importantimg" alt="Important Information" title="Important Information"/>

CSS

#importantimg {
width: 100px;
height: 40px;
border: 0px;
margin: 0px auto;
}

I can't get the image to center in its containing div. I've never known margin 0px auto to fail like this. I even tried text-align center, but no dice. Is there a method for centering images that I'm unaware of? I believe this is the first time I've tried to center an image instead of something like a div. I tried in both Firefox and IE, with no luck.

bullant
05-13-2011, 06:41 AM
<img> is an inline element and not a block level element.

If you put the <img> in a <div> and set the div width to the width of the img src and then set the div's left and right margins to auto, it should centre within the div's parent element.

Joseph Witchard
05-13-2011, 11:06 AM
I had no idea that even mattered. Thanks:) There wouldn't happen to be a list of the different tags and what type of element they are anywhere online, would there?

bullant
05-13-2011, 11:42 AM
You're welcome :)

A list of html elements and their types (http://www.w3resource.com/html/HTML-block-level-and-inline-elements.php). Not sure how complete it is though.

Excavator
05-13-2011, 02:41 PM
Wouldn't this be easier than adding an unnecessary div?
#importantimg {
width: 100px;
height: 40px;
border: 0px;
margin: 0px auto;
display: block;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum