[grinditwp]

Hej gott folk!
Har en meny som har följande struktur:

<div id="navigation">
  <ul>
    <li>
    <a href="#">Sida 1</a>
   </li>
    <li>
    <a href="#">Sida 2</a>
   </li>
osv....
</div>

Css:

//CSS
#navigation {
	position:relative;
	margin:0;
	z-index:1;
	width:889px;
	margin:10px 0 10px 0;
}
#navigation ul {
	list-style:none;
	margin:0; padding:0; 
}
#navigation ul li {
	float:left;
	margin:0 5px 0 5px;
	padding:5px 25px 0 25px;
	display:block;
	position:relative;
	text-align:center;
	height:49px;
	background:url(../../image_layout/main_elements.png) -270px -25px;
}
#navigation ul li a{
	font-family:Arial, Helvetica, sans-serif; 
	font-size:12px; 
	font-weight:bold;
	color:#FFF;
	text-decoration:none;
	
}
#navigation ul li a:hover{
	color:#FFF;
}

Menyn skapas snyggt och ser bra ut, som planerat. Men, eftersom jag använder float:left; så ligger alla objekt i menyn till vänster och detta skapar ett tomrum till höger.
Menyn är dynamisk så jag kan inte bara lägga till en padding till vänster för att putta in allt i mitten.

Hur får jag min meny att vara centrerad?