How to center a variable width image in a div on a page?

Question

I have a variable width image that I would like to concentrate in a container divthat will focus on the page.

If I set the width to divand assign it margin: 0 auto, it will center, but the problem is that the image inside divhas a variable width, so I can not set the width on the container div.

Any suggestions?

Clarification: The container divhas a background image that should be rotated 30 pixels on either side of the image. Because of this, the container divmust have a given width, but be able to expand / compress based on the size of the image.

Answer 1

add registration to the image!

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

Answer 2

img#foo {
  display:block;
  margin:0 auto;
}

An image element is a replaced element, and its inner width will allow it to center without an explicit width.

Answer 3

Maybe setting the image as a background and center will work?