how to center css navigation bar

Question

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>

possible duplicate of [How to center
in a list](http://stackoverflow.com/questions/17211076/how-to-center-ul-in-a-list) — Wex, Jun 28 '13 at 15:53

score 7 · Accepted Answer · answered Jun 28 '13 at 15:48

7

Change your last two CSS rules to:

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

jsFiddle example

answered Jun 28 '13 at 15:48

j08691

204,283
31
260
272

score 2 · Answer 2 · answered Dec 18 '13 at 06:46

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!

score 1 · Answer 3 · edited Jun 28 '13 at 15:52

1

Use the inline-block css magic :)

JSFiddle

edited Jun 28 '13 at 15:52

Vucko

20,555
10
56
107

answered Jun 28 '13 at 15:51

Alex

11,115
12
51
64

You forgot to mention you also changed the ul style. – j08691 Jun 28 '13 at 15:56

score 0 · Answer 4 · answered Jun 28 '13 at 15:50

0

li {
   display: inline-block;
}

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

answered Jun 28 '13 at 15:50

Phil Sinatra

419
3
11

score 0 · Answer 5 · edited Jul 12 '15 at 15:32

0

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.

edited Jul 12 '15 at 15:32

sjas

18,644
14
87
92

answered Jul 12 '15 at 15:27

John Winniard

1

antelove · Answer 6 · 2017-09-28T14:52:00.670

      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>

score -1 · Answer 7 · answered Jun 28 '13 at 15:47

-1

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.

answered Jun 28 '13 at 15:47

KJ Price

5,774
3
21
34

how to center css navigation bar

7 Answers7

Linked