как центрировать мое всплывающее меню навигации?

Question

Я бы хотел разместить свое плавающее меню (тег ul) на своей странице и не могу понять, что не так с моим css.Пожалуйста помоги.Спасибо.

Мой 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>

и мой 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;
}

Answer 1

Попробуйте это:

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