Centering a row of images

Hi all,

I have created the following page http://kylehouston.com/testing/ps/test.html were youll see a large image and then below it a row of 5 thumbnails.

My question is how can I set my css so that no the thumbnails are grouped in the middle of the page instead of to the left if there were 5 thumbnails or even 1 thumbnail?

If possible is there a way of modifying the <div class="ngg-galleryoverview" id="ngg-gallery-13-881"> to achieve this as this code is generated by a plugin?

Iv tried adding margin: 0 auto to ngg-galleryoverview, iv also tried just text-align:center but no joy.

Thanks in advance!

Kyle

Hi there...

Simplest solution I think is to make all your divs and images inline, and then use text-align:center. At the moment your images and the divs containing them are all block elements, and hence you need the float to make them line up. Something like:

.ngg-galleryoverview {
/*margin:0 auto;*/
text-align:center;
width:930px;

.ngg-gallery-thumbnail-box {
display:inline;
}

.ngg-gallery-thumbnail {
display:inline;
/*float:left;*/
margin:10px 10px 0 0 !important;
}

.ngg-gallery-thumbnail img {
background-color:#F5F5F5;
/*display:block;*/
padding:4px;
position:relative;
}


This seems OK in FF... you might need to mess about with your margins a bit.

Will give it a go SB, Cheers!

Hello kyllle,
Try adding this bit to your CSS -
/* ----------- Gallery style -------------*/

.ngg-galleryoverview {
/*width: 600px;*/
width: 930px;
text-align: center;
}
.ngg-gallery-thumbnail-box {
height: 108px;
width: 108px;
margin: 0 5px;
display: inline-block;
}

Based on this example (http://nopeople.com/CSS/thumbnail%20presentation/index.html).

Is .ngg-gallery-thumbnail really needed? Looks like a little divitis to me.