center <IMG/> inside a <DIV> with CSS
I want to center image inside a div. The div has fixed width 300px. The image width is known only at runtime. It usually is bigger then 300px, so image should be centered and cut right and left. margin 0 auto does not work in this case.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
div{width:300px;border:1px solid red; overflow:hidden}
img{
/* NOTE!!!!
margin:auto; doesn't work when image width is bigger than div width
image width is known only at runtime!!!
*/
}
</style>
</head>
<body>
<div>
<img src="" />
</div>
</body>
</html>
Thanks for any css ideas
UPD This interesting task is followed here
Answer
Giving the div text-align: center should work. (You may have to add align='center' as a property for it to work in IE6, though.) Note: As pointed out by @streetpc, this method will not work properly if the image is wider than the container.
Alternatively, you could also have the image as a background image:
background-image: url(url);
background-position: center top;