View Full Version : Centering a row of images

06-06-2010, 04:30 PM
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!


06-06-2010, 06:35 PM
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;*/

.ngg-gallery-thumbnail-box {

.ngg-gallery-thumbnail {
margin:10px 10px 0 0 !important;

.ngg-gallery-thumbnail img {

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

06-06-2010, 10:45 PM
Will give it a go SB, Cheers!

06-07-2010, 02:36 PM
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.

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum