how to center an image without a fixed width

Question

I am trying to center images that will not have a fixed width as its a gallery with various image sizes so cannot use margin 0 auto as you need a fixed width for that.

Is there a jquery solution?

Answer 1

Use this to center the images:

.wrapper { /* your wrapper element */
    text-align:center;   
}
.wrapper img {
    display:inline-block;   
}

However, if the images are small enough in width to go side-by-side and fit in the wrapper, they will. You can get around this with extra markup like wrapper <div>s around the image or even <br />.

Demo: http://jsfiddle.net/wesley_murch/Cwed9/1/

Make sure to adjust the width in the demo to see what I mean.

EDIT: I was playing jsfiddle while this was answered in the comments :P