Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › Centering items in a div

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • December 8, 2010 at 2:55 pm #30939
    daredanger
    Participant

    I’ve an image of width 591px and below that image I’ve to write Home, About and Contact. I want Home, About and Contact to be centered below the image. I’m using the html and css codes as shown below but I’m not getting the desired result. I’m getting Home, About and Contact starting from left only. They are not getting centered. Please help.

    My HTML Code:

    My CSS Code:

    #slider {
    
width:591px;
    
}
    
#button-wrap {
    
width: 591px ;
    
margin: 0 auto ;
    
}
    
#button li {
    
float: left;
    
margin-left: 5px;
    
}
    December 8, 2010 at 3:09 pm #70331
    jamygolden
    Member

    Try this:

    #button-wrap {
    
text-align: center;
    
}
    December 8, 2010 at 3:31 pm #70332
    daredanger
    Participant

    @jamy_za … tried ur suggestion but that didn’t work

    December 8, 2010 at 3:58 pm #70333
    jamygolden
    Member

    Ah ok I see. It’s because the width of the button wrap is the size of the slider itself. If you set the width of #button-wrap you will notice it starting to center.

    December 8, 2010 at 4:21 pm #70327
    daredanger
    Participant

    I changed the width of #button-wrap to 150px and got Home, About and Contact centered. But can’t we have a better way. Suppose that I have to add another word, say Services, to Home, About and Contact then I’ll have to again change the width to may be 200px or so. I think there should be a better approach than this.

    December 8, 2010 at 4:40 pm #70328
    jamygolden
    Member

    I’ve actually been dealing with Centering elements with a dynamic width a lot lately and I have come up with two solutions.

    CSS Method
    Change your original CSS to this:

    #slider {
    
width:591px;
    
}
    
#button-wrap {
    
display: table;
    
margin: 0 auto ;
    
}
    
#button li {
    
display: table-cell;
    
float: left;
    
margin-left: 5px;
    
}

    That should work. However, it won’t work in IE6 and 7. It will be aligned left instead.

    The other way would be a javascript method.
    Change your original CSS to this:

    #slider {
    
width:591px;
    
}
    
#button-wrap {
    
margin: 0 auto ;
    
}
    
#button li {
    
float: left;
    
margin-left: 5px;
    
}

    And add this within your <head> section:

    What that is basically doing is setting #button-wrap’s width to whatever it is at that point in time. The margin: 0 auto should then center it.

    December 9, 2010 at 8:02 am #70246
    daredanger
    Participant

    @jamy_za …. thanks a ton……your first solution worked…….the jQuery one is not working…..is it at working at your end?

    December 9, 2010 at 6:00 pm #70196
    noahgelman
    Participant

    I’m too prideful than to rely on tables.

    Try this:


    
#slider {
    
width:491px;
    
position:relative;
    
}
    

    
#button-wrap {
    
display:inline-block;
    
position:absolute;
    
left:50%;
    
top:(image height);
    
}
    
#button {
    
position:relative;
    
left:-50%;
    
}

    That sounds like something that should work. One or two things in the area might need to be adjusted. You have a solution though so you should probably stick with it.

    December 9, 2010 at 6:23 pm #70174
    daredanger
    Participant

    @noahgelman …. thanks…..ur solution is working perfectly in chrome and mozilla……in ie6 they are not coming exactly in the center, they are getting shifted more towards right side….u also said that you will not rely on tables….please tell the reason…..are there any issues?

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘CSS’ is closed to new topics and replies.