One of the questions people have frequently asked me, is how do I center the menu. My answer to all have been that I do not know how to do this in CSS, as the list element occupies the full width of its container. So the only way would be to manually set the width of the list element.

The other day I started thinking that this could be done dynamically by using javascript. Of course some people will probably not like this method, so you should stop reading now.

I have created 3 examples, for people using either MooTools, jQuery or just plain JavaScript, you can see them below as well as examples.

Please note that all 3 examples require that you set the ID of the containing div element, this is so that a background image can be added to this element.

Update while writing
Of course while writing this tutorial, I found an article which explains how to do this using CSS, but since I had already written the tutorial, you will get all 4 examples.

CSS way

Based on the article by Matthew James Taylor

CSS

#menu{text-align:center; width:100%; position:relative; overflow:hidden; background:url('topMenuImages.png') repeat-x; }

.menu{margin:0; padding:0; height:30px; background:url('topMenuImages.png') repeat-x; left:50%;clear:left; float:left; position:relative;}
.menu li{padding:0; margin:0; list-style:none; display:block; float:left; position:relative; right:50%;}
.menu li a{float:left; padding-left:15px; display:block; color:rgb(255,255,255); text-decoration:none; font:12px Verdana, Arial, Helvetica, sans-serif; cursor:pointer; background:url('topMenuImages.png') 0px -30px no-repeat;}
.menu li a span{line-height:30px; float:left; display:block; padding-right:15px; background:url('topMenuImages.png') 100% -30px no-repeat;}
.menu li a:hover{background-position:0px -60px; color:rgb(255,255,255);}
.menu li a:hover span{background-position:100% -60px;}
.menu li a.active, .menu li a.active:hover{line-height:30px; font:12px Verdana, Arial, Helvetica, sans-serif; background:url('topMenuImages.png') 0px -90px no-repeat; color:rgb(255,255,255);}
.menu li a.active span, .menu li a.active:hover span{background:url('topMenuImages.png') 100% -90px no-repeat;}

HTML

<div id="menu">
    <ul class="menu">
      <li><a href="/home" class="active"><span>Home</span></a></li>
      <li><a href="/products"><span>Products</span></a></li>
      <li><a href="/services"><span>Services</span></a></li>
      <li><a href="/about"><span>About</span></a></li>
      <li><a href="/contact"><span>Contact</span></a></li>
    </ul>
</div>

Example Centering a menu using CSS

MooTools

window.addEvent('domready', function() {
	var menuWrapID = 'menu'; // container element ID
	var menusize = 0;
	// get width of each anchor tag and sum
	$$('#'+menuWrapID+' .menu li a').each(function(el) {
		menusize += el.getSize().x;
	});
	// set unsorted list width and container background image
	var mbg = $$('.menu').getStyle('background-image');
	$(menuWrapID).setStyle('background-image',mbg);
	$$('.menu').setStyle('width',menusize);
});

Example Centering a menu using MooTools

jQuery

$(document).ready(function(){
	var menuWrapID = 'menu'; // container element ID
	var menusize = 0;
	// get width of each anchor tag and sum
	$('#'+menuWrapID+' a').each(function(i, el) {
		menusize += $(el).outerWidth();
	});
	// set unsorted list width and container background image
	var mbg = $('.menu').css('background-image');
	$('#'+menuWrapID).css('background-image',mbg);
	$('.menu').css('width',menusize+'px');
});

Example Centering a menu using jQuery

JavaScript

function menuResize() {
	var menuWrapID = 'menu'; // container element ID
	var menusize = 0;
	// get width of each anchor tag and sum
	var els = document.getElementById(menuWrapID).getElementsByTagName('a');
	for(var i = 0; i < els.length; i++) {
		var size = els[i].clientWidth;
		menusize = menusize + size;
	}
	// set unsorted list width and get its background image
	var uls = document.getElementById(menuWrapID).getElementsByTagName('ul');
	for(var i = 0; i < uls.length; i++) {
		uls[i].style.width = menusize+'px';
		var browserName=navigator.appName;
		// if FireFox, Chrome, Opera, Safari
		if (browserName==="Netscape" || browserName==="Opera") {  var bgi = getComputedStyle(uls[i],'').getPropertyValue('background-image');}
		// if Internet Explorer
		else if (browserName==="Microsoft Internet Explorer") {  var bgi = uls[i].currentStyle.backgroundImage; }
	}
	// set background image to menu div
	document.getElementById(menuWrapID).style.backgroundImage = bgi;
}

window.onload = menuResize;

Example Centering a menu using JavaScript

In the plain JavaScript version, it relies on the onload event, but you might want to add the excellent domready.js script to your page, so that the change is done when the dom is ready.