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
Somewhere around 600px looks good
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 -->