Горизонтальные элементы меню Центр

Question

У меня есть следующие файлы:

HTML файл

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

файл CSS

nav { 
} 

nav ul { 
    text-align: center; 
} 

nav ul li { 
    display: inline; 
} 

И это выглядит в браузере

Но я хочу, чтобы два элемента два быть центром в своей половине, как это

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

вместо

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

Что я должен добавить к моему коду есть так, как я хочу это?

Answer 1

попробовать так: Обновлено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 2

Использование float и text-align:

li {float: left; width: 50%; text-align: center; list-style: none;} 
li a {display: block;} 

http://jsfiddle.net/5gLkdaw5/

Answer 3

См jsFiddle

Вы можете использовать display:table;

nav ul { 
    text-align: center; 
    display:table; 
    table-layout:fixed; 
    width:100%; 
} 

nav ul li { 
    display: table-cell; 
} 

Answer 4

Попробуйте это: 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 5

Дайте литиево ширину.

увидеть все это здесь 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><a href="">Alle Rezepte</a></b></li> 
    <li class="example"><b><a href="">Alle Zutaten</a></b></li> 
</ul> 
</nav>