How to center an image without a fixed width

Question

I am trying to center images that will not have a fixed width, since this is a gallery with different image sizes, therefore I cannot use the 0 auto marker, since this requires a fixed width.

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 inserted into the wrapper, they will. You can get around this with additional markup, such as wrapping a <div> around the image or even <br /> .

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

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

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

Answer 2

Hmm -

Do you think the image is too large for the canvas? If so ... have a canvas overflow: hidden;

 if (image-width > canvas-width){ offset = image-width - canvas-width; offset = offset / 2; image.left = -offset; } 

Answer 3

try this style

HTML

 <div> <img src="" height="155px" width="155px" style="float:left"> </div> 

CSS

 img { display: table-cell; // this says treat this element like a table cell vertical-align:middle; }