how to center css navigation bar

问题:

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>

回答1:

Change your last two CSS rules to:

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

jsFiddle example

回答2:

Use the inline-block css magic :)

JSFiddle

回答3:

margin: 0 auto; only works on items that have defined widths. However, the way you currently have it written, each a tag is attempting to center, when you really want to center the ul. Here is a great way to center that when you don't know the width of your ul. Use these styles in your header, ul and li elements. Add styling to your a tags to suit.

header {
    float: left;
    width: 100%;
    overflow: hidden;
    position: relative;
}
ul {
    float: left;
    list-style: none;
    position: relative;
    left: 50%;
}
li {
    display: block;
    float: left;
    position: relative;
    right: 50%;
}

What's going on here is we're setting the header to full width, and then pushing the ul half way across the width of the browser. Then we push the li's back half the width of the ul, which now centers them on the page.

Here is a link with a very helpful tutorial about doing this very thing: http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

Good luck!

回答4:

li {
   display: inline-block;
}

#menu {
    background-color:#98bf21;
    margin: 0 auto;
    text-align: center;
    width: 80%;
}

回答5:

I had the same problem until I read this post and decided to center the text in the "nav".

So basically your ul should be in a nav so you can text-align: center the nav area.

回答6:

      nav {
        width: 75%;
        margin: auto
      }

      #menu {background-color: #98bf21}

      .container{padding: 0.10em}

      .cell-row {display:table; width:100%}
      .cell {display: table-cell}
      .cell-middle {vertical-align: middle}

      a:link, a:visited {
        font-weight: bold;
        color: black;
        text-align: center;
        padding: 4px;
        text-decoration: none;
        text-transform: uppercase;
      }

      a:hover, a:active {background-color: #7A991A}

      @media (max-width: 500px) {
        .mobile {
          display: block; 
          width: 100%; 
          text-align: center
        }
							
        nav {
          width: 100%;
          margin: auto
        }  
      }

    <nav>
      <div id="menu" class="cell-row" style="text-align: center">
        <div class="container cell cell-middle mobile"><a href="Home.aspx">Home</a></div>
        <div class="container cell cell-middle mobile"><a href="News.aspx">News</a></div>
        <div class="container cell cell-middle mobile"><a href="Articles.aspx">Articles</a></div>
        <div class="container cell cell-middle mobile"><a href="Forum.aspx">Forum</a></div>
        <div class="container cell cell-middle mobile"><a href="Contact.aspx">Contact</a></div>
        <div class="container cell cell-middle mobile"><a href="About.aspx">About</a></div>
      </div>
    </nav>

回答7:

Add the following css:

ul {
    margin: 0 auto;
    display: inline-block;
}

This will make the ul fit its contents and then be centered in its container.