Cómo centrar una navegación basada en ul-il ??

[junihh]

Hola señores

Durante mucho tiempo siempre he tenido ese problema. Para la navegación de mis proyectos prefiero los ul-li y como sabrán, los títulos de los enlaces pueden ser muy variantes en cuanto al ancho.

Si la navegación es horizontal, hacer que centre el ul en relación al contenedor siempre ha sido un problema para mi. En esos casos siempre termino poniendo el ul centrado forzozamente con margin-left/right.

¿Alguien conoce el link de algún tip para centrar los ul-li en relación a su contenedor?

Gracias anticipadas a cualquier sugerencia, idea o ayuda que me puedan ofrecer.

[cristian_cena]

En css2.

horizontal:
bloque: margin:0 auto; http://www.librosweb.es/css/capitulo...ntalmente.html
o
linea: text-align:center:

vertical:
bloque: posicion absoluta y margen en % http://www.librosweb.es/css/capitulo...icalmente.html
linea: line-height igual a la altura de la caja padre (de bloque)

[junihh]

Gracias por la sugerencia cristian_cena, pero no me sirvió. Para dejar más claro lo que pretendo, acá verás un ejemplo de nevegación con ul-li similar a lo que acostumbro a usar.

En lo que pones, "margin: 0 auto;" obliga a poner un ancho fijo, pero si el menú tiene enlaces adicionales agregados con javascript (como me tocó en una ocasión), el ancho fijo se vuelve un problema.

[IsaBelM]

creo que te refieres a esto

ul.horizontal {
list-style-type: none;
display: inline-block;
padding: 20px;
background-color: grey;
}


ul.horizontal li {
display: inline-block;
background-color: navy;
color: white;
font-weight: bold;
margin: 0 auto;
padding: 0 7px;
}


<ul class="horizontal">
<li>JAVASCRIPT</li>
<li>CSS</li>
<li>PHP</li>
<li>HTML 5</li>
</ul>

[junihh]

Hola IsaBelM

Tampoco me funciona porque no centra en relación a su contenedor. Para dejar una idea más clara, acá verás un ejemplo gráfico de lo que busco.

Como podrás ver, la navegación centra en relación al ancho del contenedor naranja y en relación a su ancho según la suma de todos los enlaces. En casos de ese tipo uso margin-left/right (como mencioné antes) para dar la apariencia de centrado, pero no me sirve si la cantidad de enlaces varía con javascript.

[IsaBelM]

prueba ahora

div.horizontal {
width: 600px;
background-color: grey;
text-align: center;
height: 50px;
}

ul.horizontal {
list-style-type: none;
display: inline-block;
padding-left: 0;
}


ul.horizontal li {
display: inline-block;
background-color: navy;
color: white;
font-weight: bold;
margin: 0 auto;
padding: 0 7px;
}


<div class="horizontal ">
<ul class="horizontal">
<li>JAVASCRIPT</li>
<li>CSS</li>
<li>PHP</li>
<li>HTML 5</li>
</ul>
</div>