Question

I have an image of variable width that I’d like to center in a container div, which will be centered on the page.

If I set a width on the div and give it a margin: 0 auto, it will center, but the problem is that the image inside of the div is of variable width, so I can’t set a width on the container div.

Any suggestions?

Clarification: The container div has a background image that needs to expand 30px on either side of the image. Because of that, the container div needs to be of a set width but be able to expand/contract based on the image size.

Answer 1

add padding to the image!

img#foo{
  display:block;
  margin:0 auto;
  background:url(/image/bg.gif);
  padding: 30px;
}