Centrar menu

[rapuig]

Hola!
Me pasa lo siguiente, tengo un menu formado por una lista horizontal, el problema es que no logro que el menu me quede centrado con respecto al div que lo contiene.
Les muestro el codigo quizas queda mas claro.

CSS

Código:

*{
margin:0px;
padding:0px;
}

body{
	margin:0px;
	padding:0px;
        font-size:12pt;
	}

#menu{
	height:56px;
	width: 100%;
	}

#navi{
	height:100%;
	width:790px;
	margin-right:auto;
	margin-left:auto;
	}

#navi li{
	font: 1.0em 'PT Serif Caption', serif;
	display:block;
	list-style:none;
	float:left;
	margin-top:15px;
	padding:5px;
	color:#E3CEB5;
	}
#navi a{
	color:#E3CEB5;
	text-decoration:none;
	}

#navi a:hover{
	color:#903023;
	text-shadow: #000 1px 1px 3px;
	text-decoration:none;
	}

#navi .activo a{
	color:#903023;
	text-shadow: #000 1px 1px 3px;	
	}

HTML

Código HTML:

<div id="menu">
	<div id="navi">
  		<ul>
            <li class="activo"><a>BOTON0</a></li>
            <li><a href="X.html">BOTON1</a></li>
            <li><a href="X.html" >BOTON2</a></li>
            <li><a href="X.html" >BOTON3</a></li>
            <li><a href="X.html" >BOTON4</a></li>
            <li><a href="X.html" >BOTON5</a></li>
            <li><a href="X.html" >BOTON6</a></li>
            <li><a href="X.html" >BOTON7</a></li>
		</ul>
	</div>
</div> 

Muchas gracias, espero que me entiendan.

[Elfede171]

El div que creaste llamado navi está centrado con respecto al div menú.
El problema esque cada botón está con un float:left; lo que impide centrar los botones mismo dentro del div navi.

Para solucionar este problema lo que tenés que hacer es cambiarle el width: al div navi a uno más ajustado con respecto a los botones masomenos un width:600px; y te va a quedar bien.

Para que entiendas lo que estoy diciendo dale bordes a los div navi y menu y te vas a dar cuenta.

[rapuig]

Gracias por responder, voy a probarlo! :)

[Suskos]

Yo creo que deberías intentar aplicar

#menu > #navi > ul{margin:0 auto;}
Si lo que quieres es centrar la lista respecto a su contenedor padre.

Si añades los bordes a #menu, #navi y a #navi > ul,
podrás ver con más claridad que elemento se alinea y cual no:

#menu, #navi, #navi > ul{border:#000 1px dashed}

Suerte

[rapuig]

Gracias! Ya lo había solucionado achicando el ancho del div, pero voy a probarlo con lo que me comentas también. Saludos.