Horizontal UL center inside DIV

Question

I have a div with ul inside, I want to center ul horizontally on the screen.

The full project code can be found here: jsfiddle

I tried using:

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

I also tried relative positioning and set% instead of px, but this does not give me the exact center of the screen, and also, if I added more elements to the menu, it would not become the center after including their elements (using a%).

My complete code is in jsfiddle for everyone you can mess with.

I pasted part of your (what I think) relevant code below for your convenience:

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> 

---

Basically, I want to center #nav, which is contained in #navbar, which is contained in #header.

Answer 1

Adding text-align:center to the #navbar div should do this because your list is inline-block .

You need to remove left:10% if you want it to be centered.

Answer 2

Here you are: http://jsfiddle.net/gzB6a/ I added

 div#navbar { text-align: center; } 

And deleted

 the ul#nav { left: 5%; }