如何居中CSS导航栏 [英] how to center css navigation bar

问题描述

我正在尝试将CS​​S导航栏居中，但无法弄清楚为什么它不起作用，我在哪里做错了.我想要它在页面的顶部中心. 我尝试了margin:0 auto但它不起作用 这是我的代码:

i am trying to center my css navigation bar but cant figure out why is not working, where am i doing wrong. i want it in the top center of the page. i tried margin:0 auto but it wont work here is my code:

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

推荐答案

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

Change your last two CSS rules to:

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

jsFiddle示例

jsFiddle example

这篇关于如何居中CSS导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！