Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to center an image without a fixed width

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?

like image 531
sat Avatar asked May 09 '11 11:05

sat


People also ask

How do you center a picture perfectly?

Press the keyboard shortcut Ctrl + A to select all layers. Click the Align horizontal centers button in the menu bar. This moves the image horizontally, centering it left to right.


1 Answers

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

like image 151
Wesley Murch Avatar answered Oct 07 '22 19:10

Wesley Murch