[SOLUCIONADO] Problema de centrado

[veniwarez]

Hola, resulta que estoy haciendo un menu en HTML y CSS y funciona genial pero no consigo centrar la barra del menu en el centro de la página.

Les dejo el código:

<style>
#navbar {
margin: 0;
padding: 0;
height: 1em;

}
#navbar li {
list-style: none;
float: left; }
#navbar li a {
font-family:Arial;
display: block;
padding: 7px 6px 6px 6px;
background-color: #EEEEEE;
color: #222222;
text-decoration: none;
border: 1px #C0C0C0 solid;
}

#navbar li ul {
display: none;
width: 10em; /* Width to help Opera out */
background-color: #EEEEEE;}


#navbar li:hover ul {
background-color: #C0C0C0;
display: block;
position: absolute;
margin: 0;
padding: 0; }
#navbar li:hover li {
float: none; }
#navbar li:hover li a {
background-color: #EEEEEE;
border: 1px #C0C0C0 solid;
color: #222222; }
#navbar li li a:hover {
background-color: #C0C0C0; }
#navbar li a:hover {
background-color: #C0C0C0; }
</style>

<div align="center" >

<ul id="navbar" >
<li><a href="#">AAAs</a><ul>
<li><a href="#">BBBB</a></li>
<li><a href="#">BBBB</a></li>
<li><a href="#">BBBB</a></li>
<li><a href="#">BBBB</a></li>
</ul>
</li>
<li><a href="#">Item One</a></li>
<li><a href="#">Item One</a></li>
<li><a href="#">Item One</a></li>
<li><a href="#">AAAs</a><ul>
<li><a href="#">BBBB</a></li>
<li><a href="#">BBBB</a></li>
<li><a href="#">BBBB</a></li>
<li><a href="#">BBBB</a></li>
</ul>
</li>
<li><a href="#">Item One</a></li>
</ul>


</div>


PD: He probado poner en align en center en el div pero no va o un % en left y funciona pero si se añade un elemento deja de estar centrado.

Muchas gracias.
Atte Veniwarez

[Mariano_Floyd]

Dale un width y margin:0 auto.

[veniwarez]

De esta forma?

#navbar {
margin: auto;
width:0;
padding: 0;
height: 1em;

}

Lo estoy haciendo bien? Ahora funciona a medias, me sale centrado a la perfección pero apilados, no me salen en horizontal sino en vertical, saben a que se debe?

[Zeromm]

no hombre, que le des un ancho real. 0 no es un ancho. Tienes que darle el ancho de lo que mida el elemento que quieras centrar. :)

[veniwarez]

Ah perdón, lo hago y va bien lo que pasa esque tengo que modificar el ancho cada vez que añado o quito un elemento del menu, no? Hay alguna forma de hacer que se ajuste automaticamente?

[Zeromm]

por supuesto!

lo que necesitas es aprender una de las propiedades mas geniales de css3 (por no decir la más genial de todas), flexbox

[veniwarez]

Hola Zeromm, gracias por el enlace, lo miro y tienes razón es exactamente lo que quiero pero no se por qué motivo no consigo que funcione. :(
PD: Qué fallo más grave, me había equivocado y puesto "flxe" en lugar de flex, ahora va genial!!!
Muchísimas gracias, has sido de grandísima ayuda.

Atte Veniwarez

[Zeromm]

flexbox es la mejor propiedad de css3, pero tienes que estar atento a la compatibilidad con navegadores o dispositivos antiguos, ya que es una propiedad "muy nueva" y para algunos tendrás que hacer alguna corrección mediante otras propiedades si quieres darles soportes.

En mi caso y por las estadisticas qeu tengo de las visitas a mi web no me preocupan dispositivos antiguos porque casi nadie me entra con versiones o dispositivos antiguos. ;)