Центр и установка автоматической ширины CSS

Question

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

<nav> 
    <ul id="menu" class="black"> 
     <li><a href="index.html">Home</a></li> 
     <li><a href="services.html">Services</a></li> 
     <li><a href="blog.html">Blog</a></li> 
     <li><a href="contact.html">Contact</a></li> 
    </ul> 
</nav> 

http://jsfiddle.net/e4fa6/

Answer 1

Я хотел бы использовать display: table; к центру авто ширины элементов.

DEMO http://jsfiddle.net/kevinPHPkevin/e4fa6/4/

nav { 
    display: table; 
    margin: auto; 
} 

Answer 2

Я раздвоенный вашу скрипку с обновлениями: http://jsfiddle.net/dvdNf/

я добавил width: 25%; и text-align: center; к вашему <li> s

Answer 3

Пара изменений я сделал, установив свой Li в :

#menu li { 
    display: inline-block; 
    float: none; 
    margin: 0; 
} 

имея Также ваш #menu как:

#menu { 
    text-align: center; 

}

Demo здесь: http://jsfiddle.net/e4fa6/2/