How to center image of variable width in DIV on page?

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

Maybe setting image as background and center it would work?

Answer 2

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

An image element is a replaced element and its intrinsic width will allow it to be centered without an explicit width set.

Answer 3

add padding to the image!

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