CEntering images within wrapper

[db73]

Hi,

I'm trying to set-up an image gallery that I want to have centred on my page. What is the best/easiest way to do this using CSS? I thought of wrapping the images in a div roughly the same width as all the images, which could then be centred. Not sure about coding or if this is the right way to be doing it! Can anyone give me some pointers?

Many thanks,
db

(screen grab showing current layout. Here I've set the 'image_wrapper' div to the same width as the 'wrapper' div & colourded it grey so it's visible. Here I'm uing just 3 to test but the final will probably be more, smaller thumbnails).

 

[DesignerBill]

To center a div in its container div (or the body) you can set left and right margins to "auto". For example, this will set top and bottom margins to 0 and left and right margins to auto:

#image-wrapper {
margin:0 auto;
}

 

[PixelPusher]

The auto value for the margin property will only work with a defined width. If you going to have other content in the wrapper div other than the images, I would suggest putting them in a container div. Try this:

div#wrapper {
text-align:center;
}
div#wrapper img {
display:inline-block;
}
/* Or in a container */
div#wrapper div:first-child {
text-align:center;
}
div#wrapper div:first-child img {
display:inline-block;
}

 

[db73]

Cheers for the replies. The 'text-align' rule sorted this out a treat

cheers

 

[PixelPusher]

Excellent, good to hear. Your welcome.