如何居中css导航栏

Question

我试图集中我的CSS导航栏,但无法弄清楚为什么不工作,我在哪里做错了.我希望它在页面的顶部中心.我试过保证金:0自动,但它不能在这里工作是我的代码:

<style>
    ul {
        list-style-type: none;
        padding: 0;
        overflow:hidden;
    }
    a:link,a:visited {
        margin:0 auto;
        display:block;
        width: 120px;
        font-weight:bold;
        color:#FFFFFF;
        text-align:center;
        padding:4px;
        text-decoration:none;
        text-transform:uppercase;
    }
    a:hover, a:active {
        background-color:#7A991A;
    }
    li {
        float: left;
    }
    #menu {
        background-color:#98bf21;
    }
</style>
<div id="menu">
        <header>
        <ul>
            <li><a href="Home.aspx">Home</a></li>
            <li><a href="News.aspx">News</a></li>
            <li><a href="Articles.aspx">Articles</a></li>
            <li><a href="Forum.aspx">Forum</a></li>
            <li><a href="Contact.aspx">Contact</a></li>
            <li><a href="About.aspx">About</a></li>
        </ul>
    </header>
    </div>

Answer 1

将您的最后两个CSS规则更改为:

li {
    display:inline-block;
}
#menu {
    background-color:#98bf21;
    text-align:center;
}

jsFiddle例子