Как выровнять навигацию по горизонтали и центру?

Question

Мне нужно сосредоточить навигационные ссылки внутри div и выровнять его по горизонтали. Я пробовал этот подход, но не работал.

Исправлена ​​ошибка с #centermenu, спасибо, но стиль не работает.

  <nav id="centermenu"> 
        <ul> 
         <li><a href="#">Business</a></li> 
         <li><a href="#">Specialities</a></li> 
         <li><a href="#">Contact us</a></li> 
        </ul> 
      </nav> 

CSS:

#centermenu { 
float: left; 
width: 100%; 
border-bottom: 2px solid #011; 
background: #ffe; 
overflow: hidden; 
position: relative; 
} 

#centermenu ul { 
float: left; 
clear: left; 
position: relative; 
list-style: none; 
display: block; 
text-align: center; 
} 


#centermenu ul li { 
display: block; 
float: left; 
list-style: none; 
margin: 1em; 
padding: 1em; 
} 

Благодаря

Answer 1

Там, кажется, опечатка в UL-части.

Cetermenu ul 

Вместо выключения

Centermenu ul 

Edit:

Следующая, кажется, работает для меня. Может быть, добавьте другие теги один за другим, чтобы увидеть, было ли это ломается.

#centermenu { 
float: left; 
width: 100%; 
    text-align: center; 
border-bottom: 2px solid #011; 
background: #ffe; 
overflow: hidden; 
position: relative; 
} 

#centermenu ul { 
margin: 2 auto; 
display: block 
} 


#centermenu ul li { 
display: inline; 
text-align: center; 
margin: 1em; 
padding: 1em; 
} 

Answer 2

изменить ваш слева от 50% до 25%

http://jsfiddle.net/ZW9Qp/

#centermenu { 
    float: left; 
    width: 100%; 
    border-bottom: 2px solid #011; 
    background: #ffe; 
    overflow: hidden; 
    position: relative; 
    } 
    #centermenu ul { 
    float: left; 
    clear: left; 
    position: relative; 
    list-style: none; 
    left: 25%; 
    display: block; 
    text-align: center; 
    } 
    #centermenu ul li { 
    display: block; 
    float: left; 
    list-style: none; 
    margin: 1em; 
    padding: 1em; 

}