horizontalmente una UL dentro de un DIV

Question

Tengo un div con un ul dentro, quiero centrar el ul horizontalmente de la pantalla.

El código completo del proyecto se puede encontrar aquí: jsfiddle

He intentado usar:

margin: 0 auto; /* After setting the width of course */ 
text-align: center; /* Ran out of ideas!! */ 

También probé posicionamiento relativo y establecer% en lugar de píxeles, pero ésto no me dan exacta centro de la pantalla, y también, si agregué más elementos al menú, no sería el centro después de incluirlos (usando un%).

Mi código FULL está en jsfiddle para que juegues con él.

He pegado algo de la (lo que creo que es) correspondiente código continuación para su comodidad:

CSS:

/* Main*/ 
ul#nav { 
display: inline-block; 
padding: 0px; 
list-style-type: none; 
white-space: nowrap; 
position: relative; 
top: 10px; 
left: 10%; /* This is what im currently using, but as thought, it doesnt work as needed :(*/ 
border: 2px solid chocolate; 
-moz-border-radius: 10px; /* Border Radius for Mozilla Firefox */ 
border-radius: 10px;  /* Border Radius for everything else*/ 
} 

ul#nav li { 
float: left; 
font-family: 'Myraid Pro', Arial, Helvetica, sans-serif; /*Use available font for menu */ 
font-weight: bold; 
margin: 0; 
padding: 5px 0 4px 0; 
background-color: #ee8043; /*Background Colour for the <li>*/ 
padding: 5px;    /* Padding for the LI */ 
-moz-border-radius: 8px; /* Border Radius for Mozilla Firefox */ 
border-radius: 8px;  /* Border Radius for everything else*/ 

}

HTML:

 <div id="header"> 
     <a href="index.html"><img id="logo" src="images/Dafne_Logo.png"/></a> 

     <div id="navbar"> 
      <ul id="nav"> 
       <li><a href="index.html" rel="home">Home</a></li> 
       <li class="menu_separator">|</li> 
       <li><a href="index.html">News</a></li> 
       <li class="menu_separator">|</li> 
       <li><a href="forums.html">Forums</a></li> 
       <li class="menu_separator">|</li> 
       <li><a href="signup4327.html?to=%252F">Signup</a></li> 
       <li class="menu_separator">|</li> 
       <li><a href="login4327.html?to=%252F">Login</a></li> 
       <li class="menu_separator">|</li> 
      </ul> 
     </div> 

    </div> 

    <div id="coloured_bar"></div> 

---

Así que, básicamente, quiero centrar la #nav que está contenida dentro de la #navbar, que está contenida dentro de la #header.

Answer 1

Agregando text-align:center al #navbar div debería hacerlo porque su lista es inline-block.

Tendrá que quitar el left:10% si lo quiere centrado.

Answer 2

Aquí van: http://jsfiddle.net/gzB6a/ añadí

div#navbar { 
    text-align: center; 
} 

y se retira

the ul#nav { left: 5%; }