HTML | Center menubar on screen

Question

need some help. I'm just learning HTML and have been looking at how to do menus today, whilst doing so I have ran into a problem.

I can't seem to figure out how to center the menu on screen.

This is what I have so far;

<div id="navMenu">
    <ul>
        <li><a href="#">Home</a></li>

        <li><a href="#">WWW.</a>
        <ul>
            <li><a href="#">Through the years</a></li>
        </ul></li>

        <li><a href="#">Browsers</a>
        <ul>
            <li><a href="#">IE</a></li>
            <li><a href="#">Firefox</a></li>
            <li><a href="#">Chrome</a></li>
        </ul></li>

        <li><a href="#">CSS</a>
        <ul>
            <li><a href="#">CSS 2.1</a></li>
            <li><a href="#">CSS 3</a></li>
        </ul></li>

        <li><a href="#">Scripting</a>
        <ul>
            <li><a href="#">JavaScripts</a></li>
            <li><a href="#">jQuery</a></li>
        </ul></li>

    </ul>
</div>

Current CSS;

#navMenu{
    margin:0;
    padding:0;
}
#navMenu ul{
    margin:0;
    padding:0;
    line-height:30px;
}
#navMenu li{
    margin:0;
    padding:0;
    list-style:none;
    float: left;
    position: relative;

    background-color: #999;
    border-radius: 5px;
}
#navMenu ul li a{
    text-align: center;
    text-decoration:none;
    height:30px;
    width:150px;
    display:block;
    color: #FFF;
    border: 1px solid #FFF;
    text-shadow: 1px 1px 1px #000;
}
#navMenu ul ul{
    position:absolute;
    visibility:hidden;
    top:32px;
}
#navMenu ul li:hover ul{
    visibility:visible;
}
#navMenu li:hover{
    background-color: #09F;
}
#navMenu ul li:hover ul li a:hover{
    background-color: #CCC;
    color: #000;
}
#navMenu a:hover{
    color:#000;
}

The above produces this .... http://gyazo.com/55cf62d121ef16eb1248e5246d0accae

Anyway to get the menu bar in the center of the screen.

SIDE NOTE:: Any spoilers tags on this site?

Answer 1

Try using display: inline-block and text-align: center.

Set display: inline-block for the <ul> and text-align: center for the container #navMenu. Set text-align: left for #navMenu li to fix the submenus.

Also

Example

#navMenu{
    margin:0;
    padding:0;
    text-align: center;
}
#navMenu ul{
    margin:0;
    padding:0;
    line-height:30px;
    display: inline-block;
}
#navMenu li{
    margin:0;
    padding:0;
    text-align: left;
    float: left;
    list-style:none;
    position: relative;
    background-color: #999;
    border-radius: 5px;
}

Answer 2

Add a width to your menu wrapper and give the left and right an automatic margin.
You can adjust the width depending on where in the center you want to have your nav positioned.

#navMenu {
width: 960px;
margin:0 auto;
padding:0;
text-align: center;

}

The margin and paddings your have in the ul and li are not needed.

#navMenu ul{
list-style: none;
line-height:30px;
display: inline-block;
text-align: center;

}

#navMenu li{
display: inline;

}

Padding should go here to keep all your links even.

  #navMenu li a {
  display: block;
  padding: 10px;

}