how to center my floated navigation menu?

Question

I would like to center my floated menu(ul tag)in my page and can't figure out what's wrong with my css. Please help. Thanks.

My html

<section>
    <div id='index'><img src='images/index_pic.png' title='index Picture'/></div>
    <nav>
        <ul>   ////I want to center this menu, but the 3 buttons all float to left.
            <li id=browser ><a href=#></a></li>
            <li id=user_management><a href=#></a></li>
            <li id=log_out><a href=#> </a></li>
        </ul>

    </nav>
</section>

and my css

section {
    color: blue;
        margin: 0 auto;
    color:blue;
    width:980px;
    height:700px;
}
ul{

    list-style:none;
}

#browser a{
    color:red;
    width:270px;
    height:32px;
    display:inline-block;
    float:left;
    background-image:url('../images/browser_BT.jpg');
}
#user_management a{
    color:red;
    width:270px;
    height:32px;
    display:inline-block;
    float:left;
    background-image:url("../images/user_management_BT.jpg");
}
#log_out a{
    color:red;
    width:270px;
    height:32px;
    display:inline-block;
    float:left;
    background-image:url('../images/log_out_BT.jpg');
}


section #index img{
padding:3px;
border:1px solid #a6a6a6;
}

This is a possible duplicated of that issue : http://stackoverflow.com/questions/963636/why-cant-i-center-with-margin-0-auto — Jibou, Jan 19 '12 at 00:00

coryetzkorn · Accepted Answer · 2012-01-19T00:07:53.000

1

Try this:

ul {
    list-style: none;
    width: 810px;
    margin: 0 auto;
}

edited Jan 19 '12 at 00:07

answered Jan 19 '12 at 00:01

coryetzkorn

666
2
8
21

You may also need to give
a width of 980px to match its containing div.
– coryetzkorn Jan 19 '12 at 00:02

how to center my floated navigation menu?

1 Answers1