SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Center 1, 2 or 3 child divs in a parent div

    Hello,

    I want to center maybe one, two, three four div(s) in a parent div. So "child" divs can be variable.
    I have one big picture and beneath this picture I want to put the thumbs centered under the big picture.
    So as I said the number of child divs can vary, I mean sometimes is it one div, another time 2 or three divs. But independet of the number of divs, I want to have these divs centered beneath the big picture.

    I hope that I'm clear enough. Is this possible with css?

    Nico

  2. #2
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  3. #3
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,259
    Mentioned
    245 Post(s)
    Tagged
    1 Thread(s)
    Do you have an example of what you want? I mean, I've seen the page you linked to but I'm still uncertain of the effect that you want to acomplish. Do you want each picture centered, one on top of another, or do you want all of those pictures centered but side by side?

    If the effect you're after is the one you're showing in your page, it looks like you got it (even if the html is a bit too much and maybe it could be cleaned)

  4. #4
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, on top of each other but centered side by side.

    C = center of the big pictuer/div whats above my thumbs
    M = margin between the two thumbs for example 5px
    T1... = Thumb picture


    If I have one thumb picture that it should like this
    |----------------- C -----------------|
    |--T1--|

    If I have two thumb pictures that it should like this
    |----------------- C -----------------|
    |--T1--| M |--T2--|


    If I have three thumb pictures that it should like this
    |----------------- C -----------------|
    |--T1--| M |--T2--| M |--T3--|


    Make this it more clear what I mean.

  5. #5
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by nkamp View Post
    No, on top of each other but centered side by side.

    C = center of the big pictuer/div whats above my thumbs
    M = margin between the two thumbs for example 5px
    T1... = Thumb picture


    If I have one thumb picture that it should like this
    |----------------- C -----------------|
    |--T1--|

    If I have two thumb pictures that it should like this
    |----------------- C -----------------|
    |--T1--| M |--T2--|


    If I have three thumb pictures that it should like this
    |----------------- C -----------------|
    |--T1--| M |--T2--| M |--T3--|


    Make this it more clear what I mean.
    Just have a <p> or <div> with text-align:center;, and then put the <img>s in there, and put an equal left/right margin on each of them, that should do what you need.

  6. #6
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No that is not enough. The thumbs are in a div.
    I ahave already text-align: center and if I do margin:0 auto or margin 0 5px doesn't help. I have just tried it with firebug. I add float:left; then the thumbs are side by side but not centered.

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by nkamp View Post
    The thumbs are in a div.
    You could try setting the divs to display: inline-block; and the partent div text-align: center. E.g.

    Code:
    #team_pagewrapper {
      text-align: center;
    }
    
    #team_thumbs_wrapper {
      display: inline-block;
    }
    However, be aware of a major flaw here: you are using the the #team_thumbs_wrapper ID more than once, which isn't allowed with an ID. Use a class instead, which is allowed to be used multiple times.

  8. #8
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, I see it now as well and there is another thing I see now that the "id=team_thumbs_wrapper" around every thumb. It's a modification of an earlier page. I didn't noticed it. Stupid.
    I know you can use a 'id' only once on page. I will first change this, and look again.

    Thanks anyway.

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Yes, browsers seem to let you off the hook with the multiple IDs, but still better to change them to classes. But either way, that code I gave seem s to work for me.

  10. #10
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    You could try setting the divs to display: inline-block; and the partent div text-align: center. E.g.

    Code:
    #team_pagewrapper {
      text-align: center;
    }
    
    #team_thumbs_wrapper {
      display: inline-block;
    }
    However, be aware of a major flaw here: you are using the the #team_thumbs_wrapper ID more than once, which isn't allowed with an ID. Use a class instead, which is allowed to be used multiple times.
    Ok this is the solution in combination with solving my two other errors:
    - because first I had only one thumb and I have made it now that it is possible to add more then one thumb. But I have had forgotton to rename the id to a class
    - I my for loop I have put thumb wrapper div. So every thumb had is his 'own' thumb wrapper which is wrong.

    My problem is solved.

    Thanks.

    Nico


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
  •