How to align navbar to center with css

Question

I need help to align my navbar bar to center Here is my code What's wrong with it? It does not align the menu to the center.

#nav {
  position: absolute;
  left: 0px;
  height: 40px;
  background-color: #2C64B4;
  width: 100%;
  margin: 0 auto;
}
#nav ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
#nav ul li {
  margin: 0;
  padding: 0;
  float: left;
}
#nav ul li a {
  text-decoration: none;
  padding: 10px 20px;
  display: block;
  color: #FFF;
  text-align: center;
}

<div id="nav">
  <ul>
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">About Us</a>
    </li>
    <li><a href="#">Blah</a>
    </li>
    <li><a href="#">exampl</a>
    </li>
  </ul>
</div>

Answer 1

One way would be to set the display of #nav ul to inline-block. Then add text-align: center to the parent element in order to center the child ul:

Example Here

#nav {
    position: absolute;
    left: 0px;
    height: 40px;
    background-color: #2C64B4;
    width: 100%;
    text-align: center;
}
#nav ul {
    margin: 0;
    padding: 0;
    display: inline-block;
}

Alternatively, you could also set the display of the parent element, #nav to flex, and then add justify-content: center to center the child element horizontally.

Example Here

#nav {
    position: absolute;
    left: 0px;
    height: 40px;
    background-color: #2C64B4;
    width: 100%;
    display: flex;
    justify-content: center;
}

Answer 2

Not a big deal here.

Just add text-align:center to ul and make li display:inline-block

HTML

<div id="nav">
    <ul>
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">About Us</a>
        </li>
        <li><a href="#">Blah</a>
        </li>
        <li><a href="#">exampl</a>
        </li>
    </ul>
</div>

CSS

#nav {
    position: absolute;
    left: 0px;
    height: 40px;
    background-color: #2C64B4;
    width: 100%;
    margin: 0 auto;
}
#nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}
#nav ul li {
    margin: 0;
    padding: 0;
    display: inline-block;
}
#nav ul li a {
    text-decoration: none;
    padding: 10px 20px;
    display: block;
    color: #FFF;
    text-align: center;
}

Check in Fiddle

Answer 3

Update your css of ul as

#nav ul {
    margin: auto;
     padding: 0;
     overflow: hidden;
     width: 60%;
}

check fiddle:

http://jsfiddle.net/swapnilmotewar/7kk8knd0/2/

Answer 4

#nav {
    height: 40px;
    background-color: #2C64B4;
    width: 100%;
    margin: 0 auto;
    }   
#nav ul {
    margin: 0;
    padding: 0;
    text-align:center;
}
#nav ul li {
    margin: 0;
    padding: 0;
    display:inline-block;
    position: relative;
}
#nav ul li a {
    text-decoration: none;
    padding: 10px 20px;
    display: block;
    color: #FFF;
    text-align: center;     
    }

Use this CSS you will got solution. Add in Li relative position, if you require drop down for some categories