kyllle — 2010-06-06T11:30:09-04:00 — #1
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!
ryanreese — 2010-06-06T11:38:54-04:00 — #2
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
kyllle — 2010-06-06T11:50:49-04:00 — #3
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?
kohoutek — 2010-06-06T12:50:59-04:00 — #4
You can wrap your ngg-galleryoverview container into another container, e.g. inner, so .ngg-galleryoverview > .inner.
<!--------- content --------->
</div><!-- end ngg-galleryoverview -->
</div><!-- end inner -->