How To Center Your Navigation Menu Tutorial (The End ALL)
As always, there are many ways to skin a cat. Below, I've complied/created the six best/easiest ways to center your navigation menu (AKA: nav, navbar, menu). All the demos are done up with a little style, however, all the code shown below, is stripped down to it's bare essentials (i.e. only enough to make it center). *{margin:0;padding:0;} is assummed applied to all below code.
Method #1 is primarily using margin:auto; to center the nav. If your menu items (li/a) are a fixed width, then this method is probably the easiest way to center your nav. The essentail pieces of code used to center the nav are in bold.
The CSS
#nav {
width:750px;
margin:0 auto;
list-style:none;
}
#nav li {
float:left;
}
#nav a {
display:block;
text-align:center;
width:150px; /* fixed width */
text-decoration:none;
}
The HTML
<ul id="nav"> <li><a href="#">HOME</a></li> <li><a href="#">CAPABILITIES</a></li> <li><a href="#">ABOUT US</a></li> <li><a href="#">RFQ</a></li> <li><a href="#">CONTACT US</a></li> </ul>
Method #2 is primarily using position:absolute; to center the nav. I've never actually centered a menu in this way, but, if your menu items (li/a) are a fixed width, then this is a pretty easy way to center your nav also. The essentail pieces of code used to center the nav are in bold.
The CSS
div {
position:relative;
}
#nav {
position:absolute;
left:50%;top:0;
margin-left:-375px; /* negative margin equal to half the width */
width:750px;
list-style:none;
}
#nav li {
float:left;
}
#nav a {
display:block;
text-align:center;
width:150px; /* fixed width */
text-decoration:none;
}
The HTML
<div> <ul id="nav"> <li><a href="#">HOME</a></li> <li><a href="#">CAPABILITIES</a></li> <li><a href="#">ABOUT US</a></li> <li><a href="#">RFQ</a></li> <li><a href="#">CONTACT US</a></li> </ul> </div>
Method #3 is primarily using text-align:center; to center the nav. If your menu items (li/a) are a variable width, and you DON'T need a display block environment for the li/a, then this is the easiest way for you to center your nav. The essentail pieces of code used to center the nav are in bold.
The CSS
#nav {
text-align:center;
}
#nav li {
display:inline;
}
#nav a {
text-decoration:none;
padding:0 30px; /* variable width */
}
The HTML
<ul id="nav"> <li><a href="#">HOME</a></li> <li><a href="#">CAPABILITIES</a></li> <li><a href="#">ABOUT US</a></li> <li><a href="#">RFQ</a></li> <li><a href="#">CONTACT US</a></li> </ul>
Method #4 is primarily using display:inline-block; to center the nav. If your menu items (li/a) are a variable width, and you DO need a display block environment for the li/a, then this is probably going to be the easiest way for you to center your nav. IE6/7 are the only ones that need a little helping hand (as shown below).
The CSS
#nav {
text-align:center;
}
#nav ul {
display:inline-block;
list-style:none;
}
* html #nav ul { /* Target IE6 */
display:inline;
}
*+html #nav ul { /* Target IE7 */
display:inline;
}
#nav li {
display:inline;
}
#nav a {
float:left;
text-decoration:none;
padding:0 30px; /* variable width */
}
The HTML
<div id="nav"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">CAPABILITIES</a></li> <li><a href="#">ABOUT US</a></li> <li><a href="#">RFQ</a></li> <li><a href="#">CONTACT US</a></li> </ul> </div>
Method #5 is primarily using position:relative; to center the nav. If your menu items (li/a) are a variable width, and you DO need a display block environment for the li/a, and/or you want to center a "widthless float", then this is another easy way to center your nav. Again, IE6/7 are the only ones that need a little helping hand (as shown below).
The CSS
#wrap {
overflow:hidden;
position:relative; /* IE7 needs this */
}
#nav {
float:left;
position:relative;
left:50%;
}
#nav ul {
float:left; /* IE6 needs this */
position:relative;
left:-50%;
list-style:none;
}
#nav li {
float:left;
}
#nav a {
float:left;
text-decoration:none;
padding:0 30px; /* variable width */
}
The HTML
<div id="wrap"> <div id="nav"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">CAPABILITIES</a></li> <li><a href="#">ABOUT US</a></li> <li><a href="#">RFQ</a></li> <li><a href="#">CONTACT US</a></li> </ul> </div> </div>
Method #6 is primarily using display:table; to center the nav. If your menu items (li/a) are a variable width, and you DO need a display block environment for the li/a, then this is yet another, and final way to center your nav. And Yet Again, IE6/7 are the only ones that need a little helping hand (as shown below).
The CSS
#nav {
display:table; /* centers modern browsers */
margin:0 auto; /* centers modern browsers */
text-align:center; /* centers IE6/7 */
}
#nav ul {
list-style:none;
display:inline-block; /* IE6/7 haslayout trip-switch */
}
#nav ul {
display:inline; /* IE6/7 haslayout trip-switch, and IE6/7 only need ul to be display inline, yet does no harm to others */
}
#nav li {
display:inline;
}
#nav a {
float:left;
text-decoration:none;
padding:0 30px; /* variable width */
}
The HTML
<div id="nav"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">CAPABILITIES</a></li> <li><a href="#">ABOUT US</a></li> <li><a href="#">RFQ</a></li> <li><a href="#">CONTACT US</a></li> </ul> </div>
