Grow your CSS skills. Land your dream job.

Centering items in a div

  • # December 8, 2010 at 2:55 pm

    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

    Try this:

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

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

    # December 8, 2010 at 3:58 pm

    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

    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

    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

    @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

    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

    @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?

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".