How do I center "my" navigation bar?

Question

So I had a search online for a nav bar I could use, and upon finding one I added it to the webpage that I'm making

CSS:

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

li {
    float: left;
}

a:link, a:visited {
    display: block;
    width: 120px;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #98bf21;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
}

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

HTML:

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

w3schools link

Anyway, how would I go about centering this to the middle of the page?

When I checked other questions it said the problem was something to do with float: left, but when I tried to replace it with the recommened alternative display:inline-block; it would vertically align the boxes

Any help is appreciated ^^

possible duplicate of [Horizontally center a div in a div](http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div) — Ormoz, Aug 26 '15 at 02:38
but we wouldn't know if its a dup since we haven't seen any code from @gitclown. — Shawn Mehan, Aug 26 '15 at 02:41

JRulle · Accepted Answer · 2015-08-26T02:44:40.807

Try this CSS:

ul {
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
    text-align: center;
}

li {
    display: inline-block;
}

As you can see, it puts a little space between each element, this is because the returns between the <li> lines in the HTML are being ready in as white space because of display: inline-block. You can use the below method to remove those spaces:

<ul>
  <li><a href="#home">Home</a></li><!--
  --><li><a href="#news">News</a></li><!--
  --><li><a href="#contact">Contact</a></li><!--
  --><li><a href="#about">About</a></li>
</ul>

JSFIDDLE DEMO

How do I center "my" navigation bar?

1 Answers1