Back to CSS Tips
Preview: what the working site looks like.

Centering Menus

Shown above is my preferred method of centering a menu with no set width. In this example, red #menu1 uses text-align: center; and display: inline-block;. This works just fine on the old unordered list style menus also, you just need the display: inline-block; applied to the list-item and display: block; applied to the anchor.

One problem everyone has with red #menu1 is the way display: inline-block; always adds a gap. Adjusting margin or padding does not remove it so you end up living with the gap or using a negative margin to remove it and I am not a fan of negative margins.

The gap comes from having text in the anchor. To remove it you just need to adjust the text-spacing a bit. Setting the containing element to a value of -0.3em and the child anchor at 0 seems to do the trick in this example.

The usual options for centering are:

The markup
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
	<nav id="menu1">
		<a href="#">Home</a>
		<a href="#">About</a>
		<a href="#">Work</a>
		<a href="#">Clients</a>
		<a href="#">Contact</a>
	</nav>
	<nav id="menu2">
		<a href="#">Home</a>
		<a href="#">About</a>
		<a href="#">Work</a>
		<a href="#">Clients</a>
		<a href="#">Contact</a>
	</nav>
	<nav id="menu3">
		<a href="#">Home</a>
		<a href="#">About</a>
		<a href="#">Work</a>
		<a href="#">Clients</a>
		<a href="#">Contact</a>
	</nav>
</body>
</html>
        
The CSS

nav#menu1 {
    margin: 20px 0;
    padding: 0;
	text-align: center;
	letter-spacing: -0.3em; /*first part of removing inline-block gap*/
}
	nav#menu1 a {
		padding: 20px 30px;
		display: inline-block;
		letter-spacing: 0; /*last part of removing inline-block gap */
		background: #f00; 
	}
nav#menu2 {
	width: 525px;
    margin: 20px auto;
    padding: 0;
}
	nav#menu2 a {
		padding: 20px 30px;
		float: left;
		display: block;
		background: #ccc; 
	}
nav#menu3 {
    margin: 20px 0;
    padding: 0;
    float: right;
	clear: both;
    position: relative;
    right: 50%;
}
	nav#menu3 a {
		padding: 20px 30px;
		float: left;
		position: relative;
		left: 50%;
		display: block;
		background: #0f0; 
	}