Horizontal menu center elements - html

Question

I have the following files:
html file
<nav>
<ul>
<li><b>Alle Rezepte</b></li>
<li><b>Alle Zutaten</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 this:
http://jsfiddle.net/GCu2D/691/
CSS:
nav ul {
text-align: center;
margin:0;
padding:0;
list-style-type:none;
white-space:nowrap;
}
nav ul li {
float:left;
width:50%;
}

Answer 2

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;
}

Answer 3

Use float and text-align:
li {float: left; width: 50%; text-align: center; list-style: none;}
li a {display: block;}
http://jsfiddle.net/5gLkdaw5/

Answer 4

Give the li a width.
see it all here http://codepen.io/mike-grifin/pen/bdVZJP
CSS:
nav ul {
top: 0;
left: 0;
}
nav ul li {
}
.example {
background-color: green;
display: inline-block;
padding: 20px;
margin: 0;
width: 46%;
text-align: center;
}
HTML:
<nav>
<ul>
<li class="example"><b>Alle Rezepte</b></li>
<li class="example"><b>Alle Zutaten</b></li>
</ul>
</nav>

Answer 5

See jsFiddle
You can use display:table;
nav ul {
text-align: center;
display:table;
table-layout:fixed;
width:100%;
}
nav ul li {
display: table-cell;
}