Center a Navigation Bar - html

Question

Using the following CSS, I'm trying to make a navigation bar at the top of the page (fixed to the top) but instead of it being on the absolute left of the screen, I want it centered.
ul#list-nav
{
position:fixed;
top:0;
left:0;
margin:auto;
padding:0px;
width:100%;
height:28px;
font-size:120%;
display:inline;
text-decoration:none;
list-style:none;
background-color: #1F1F1F;
border:none;
z-index:1000;
}
ul#list-nav li
{
float:left;
}
ul#list-nav a
{
background-color:#1F1F1F;
color:#C4C4C4;
/*display:block;*/
padding:5px 15px;
text-align: center;
text-decoration:none;
font-size:14px;
}
ul#list-nav a:hover
{
background-color:#4D4D4D;
text-decoration:none;
}
ul#list-nav a:active
{
background-color:#9C9C9C;
text-decoration:none;
}
Attempts so far make it a vertical list, or make the buttons start in the center (rather than be centered). How can I accomplish this?
EDIT: below is the HTML ... this list is the only thing being styled.
<ul id="list-nav">
<li>Home</li>
<li>Projects</li>
<li>Opinion</li>
<li>Humour</li>
<li>Games</li>
<li>Movies</li>
<li>TV Shows</li>
</ul>
EDIT2: here's a jsFiddle if this helps
http://jsfiddle.net/752jU/1/

Answer 1

You only need one wrapper div to accomplish this...
http://jsfiddle.net/752jU/5/
Note: By using display: inline my answer is also good in IE 6 & 7, if that matters.
CSS:
div#wrapper {
position: fixed;
top: 0;
width: 100%;
text-align: center;
height:28px;
background-color: #1F1F1F;
border: none;
z-index: 1000;
}
ul#list-nav {
padding: 0px;
width: auto;
font-size: 120%;
text-decoration: none;
list-style: none;
}
ul#list-nav li {
display: inline;
}
HTML:
<div id="wrapper">
<ul id="list-nav">
<li>Home</li>
<li>Projects</li>
<li>Opinion</li>
<li>Humour</li>
<li>Games</li>
<li>Movies</li>
<li>TV Shows</li>
</ul>
</div>

Answer 2

You need to insert the list in 3 nested divs:
In your css:
div#container1
{
position:fixed;
top:0;
left:0;
width:100%
}
div#container2
{
margin-left:auto;
margin-right:auto;
text-align: center;
}
div#container3
{
display:inline-block;
}
Then in your html:
<div id="container1">
<div id="container2">
<div id="container3">
<ul id="list-nav">
...
</ul>
</div>
</div>
</div>
See http://jsfiddle.net/jZQ4v/ for a version of your code that center properly

Answer 3

Use:
#list-nav {
padding: 0px;
height: 28px;
font-size: 120%;
margin: auto;
text-align: center;
list-style: none;
background-color: #1F1F1F;
border: none;
z-index: 1000;
}
#list-nav li {
display: inline;
text-align: center;
}
#list-nav a {
color: #C4C4C4;
background-color: #1F1F1F;
display: inline;
text-decoration: none;
padding: 5px 15px;
font-size: 14px;
}
#list-nav a:hover {
background-color: #4D4D4D;
text-decoration: none;
}
#list-nav a:active {
background-color: #9C9C9C;
text-decoration: none;
}
I removed all unnecessary coding which didn't alter the menu in any way.
See a live demo here: http://jsfiddle.net/YFDeX/1/
Edit: Altered for compatibility with IE6+
Hope this helps.