Centrar menú de navegación horizontal

[MarioAraque]

Buenos días,

Hago este thread porque estoy teniendo muchos problemas para poder centrar el menú de navegacion de la web que me encomendaron maquetar. Pongo en todos lados text-align:center y la verdad no logro ningun cambio. Y ya estoy llegando al punto de querer probar para que salga antes de solucionar el problema.....por lo que es mejor consultarle a ustedes que saben mucho mas que yo.

El codigo del nav es el siguiente:

Código:

<div class="nav">
        <div class="izquierda"></div>
            <ul class="menu">
                <li><a href="#" title="Volver al inicio"><span>Inicio</span></a></li>
                <li class="divider"></li>
                <li><a href="#" title="Empresa"><span>Empresa</span></a></li>
                <li class="divider"></li>
                <li><a href="#" title="Servicios"><span>Servicios</span></a></li>
                <li class="divider"></li>
                <li><a href="#" title="Productos"><span class="current">Productos</span></a></li>
                <li class="divider"></li>
                <li><a href="#" title="Noticias"><span>Noticias</span></a></li>
                <li class="divider"></li>
                <li><a href="#" title="Distribuciones"><span>Distribuciones</span></a></li>
                <li class="divider"></li>
                <li><a href="#" title="Cont&aacute;ctenos"><span>Localizaci&oacute;n y contacto</span></a></li>
            </ul>
            <div class="derecha"></div>
        </div>

Y el CSS es el siguiente:

Código:

.nav{
  width: 960px;
  height: 63px;
  text-align:center;
  margin: 0 auto;
}

.izquierda{
  width:9px;
  height:63px;
  float:left;
  background:url(images/bordeizq.png) no-repeat center;
}

.derecha{
  width:9px;
  height:63px;
  float:left;
  background:url(images/bordeder.png) no-repeat center;
}


ul.menu{
  list-style-type:none;
  float:left;
  width:942px;
  margin: auto;
  padding:0px;
  background:url(images/fondo_menu.png) repeat-x;
  text-align: center;
}

ul.menu li {
  font-size:12px;
  font-family:Arial, Helvetica, sans-serif;
  line-height:63px;
  vertical-align:middle;
}

ul.menu li.divider {
  width:5px;
  height:63px;
  float:left;
  background:url(images/menu_sep.png) no-repeat center;
}

ul.menu li a{
  color:#FFF;
  display:block;
  float:left;
  margin:0 14px;
  height:35px;
  text-decoration:none;
  background:url(images/fondo_menu.png);
  text-transform:uppercase;
}

ul.menu li a span:hover, .current{
  background:#ba122b;
}

ul.menu li a span{
  padding: 8px 7px 10px 7px;
}

En resultado final lo pueden ver desde el siguiente link:

http://www.juegodetenisalkon.com/tarea/

Les estare muy agradecido si me ayudan, de verdad.

Saludos.