Horizontal menu center elements

Question

I have the following files:

html file

<nav>
    <ul>
        <li><b><a href="">Alle Rezepte</a></b></li>
        <li><b><a href="">Alle Zutaten</a></b></li>
    </ul>   
</nav>

css file

nav {
}

nav ul {
  text-align: center;   
}

nav ul li {
  display: inline;
}

And it looks like this in the browser

But I want the two elements two be center in their own half, like this

|----------li1-----------|---------li2------------| 

instead of

|---------------------li1|li2---------------------|

What do I have to add to my code have it the way I want it?

Answer 1

try like this: Updated Demo

 nav {
    margin:0 auto;
    text-align: center;
    width:100%;
    background-color:#ccc;
    border:1px solid #666;
}
nav ul {
    margin:0 auto;
}
nav ul li {
    display:inline-block;
    padding:10px 15px;
    list-style-type:none;
    background-color:#ccc;
    border-right:1px solid #666;
    text-align: center;
}
nav ul li a {
    font-weight:bold;
    display:block;
    text-align: center;
}