Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder kyllle's Avatar
    Join Date
    Mar 2008
    Posts
    334
    Thanks
    85
    Thanked 2 Times in 2 Posts

    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
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    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:

    Code:
    .ngg-galleryoverview  {
    /*margin:0 auto;*/
    text-align:center;
    width:930px;
    
    .ngg-gallery-thumbnail-box  {
    display:inline;
    }
    
    .ngg-gallery-thumbnail  {
    display:inline;
    /*float:left;*/
    margin:10px 10px 0 0 !important;
    }
    
    .ngg-gallery-thumbnail img {
    background-color:#F5F5F5;
    /*display:block;*/
    padding:4px;
    position:relative;
    }
    This seems OK in FF... you might need to mess about with your margins a bit.

  • #3
    Regular Coder kyllle's Avatar
    Join Date
    Mar 2008
    Posts
    334
    Thanks
    85
    Thanked 2 Times in 2 Posts
    Will give it a go SB, Cheers!

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello kyllle,
    Try adding this bit to your CSS -
    Code:
    /* ----------- 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.

    Is .ngg-gallery-thumbnail really needed? Looks like a little divitis to me.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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