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, you are using margin:0 auto on “.ngg-galleryoverview” but the width is too great to center it! Just lower the width :slight_smile:

Somewhere around 600px looks good :slight_smile:

Hey Ryan!

Thanks for the reply, yeah I lowered the width to 600px and that works great if I have 5 images below the main banner, problem is if I only want 1 thumbnail to be below the main image or 2 or 3… then a 600px container will be too big and the thumbnails wont be centered?

You can wrap your ngg-galleryoverview container into another container, e.g. inner, so .ngg-galleryoverview > .inner.

.ngg-galleryoverview {
float:right;
left:-50%;
position:relative;
}

.inner {
position:relative;
left:50%;
float:left;
}

.ngg-gallery-thumbnail-box {
float:left;
position:relative;
}

<div class="inner">
  <div class="ngg-galleryoverview">
    <div class="ngg-gallery-thumbnail-box">
    <!--------- content --------->
    </div>
  </div><!-- end ngg-galleryoverview -->
</div><!-- end inner -->