SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist kyllle's Avatar
    Join Date
    Jun 2008
    Posts
    469
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Evangelist kyllle's Avatar
    Join Date
    Jun 2008
    Posts
    469
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  4. #4
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    You can wrap your ngg-galleryoverview container into another container, e.g. inner, so .ngg-galleryoverview > .inner.

    Code CSS:
    .ngg-galleryoverview {
    float:right;
    left:-50%;
    position:relative;
    }
     
    .inner {
    position:relative;
    left:50%;
    float:left;
    }
     
    .ngg-gallery-thumbnail-box {
    float:left;
    position:relative;
    }

    Code HTML4Strict:
    <div class="inner">
      <div class="ngg-galleryoverview">
        <div class="ngg-gallery-thumbnail-box">
        <!--------- content --------->
        </div>
      </div><!-- end ngg-galleryoverview -->
    </div><!-- end inner -->
    Maleika E. A. | Rockatee | Twitter | Dribbble




Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •