center inside a
with CSS

Question

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

Pekka · Accepted 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;

Alternatively, you could also have the image as a background image:

background-image: url(url);
background-position: center top;

center <IMG/> inside a <DIV> with CSS

Tags:

html

css

centering

Dan

1 Answers

Pekka

Recent Activity

Donate For Us