Center a Navigation Bar

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><a href="/ourbs/index.php">Home</a></li>
            <li><a href="/ourbs/categories/projects.php">Projects</a></li>
            <li><a href="/ourbs/categories/opinion.php">Opinion</a></li>
            <li><a href="/ourbs/categories/humour.php">Humour</a></li>      
            <li><a href="/ourbs/categories/games.php">Games</a></li>
            <li><a href="/ourbs/categories/movies.php">Movies</a></li>
            <li><a href="/ourbs/categories/tvshows.php">TV Shows</a></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><a href="/index.php">Home</a></li>
        <li><a href="/ourbs/categories/projects.php">Projects</a></li>
        <li><a href="/categories/opinion.php">Opinion</a></li>
        <li><a href="/categories/humour.php">Humour</a></li>        
        <li><a href="/categories/games.php">Games</a></li>
        <li><a href="/categories/movies.php">Movies</a></li>
        <li><a href="/categories/tvshows.php">TV Shows</a></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.