Centrar elementos de lista UL

[McBlink]

Buenas noches,
tengo un problema para centrar una lista con un par de etiquetas <li> dentro. Lo que sucede, es que al darle un ancho0 fijo a la lista <ul> y flotar sobre la derecha los <li> dentro, éstos no se centran porque están flotados.. hay alguna forma de poder centrarlos?

Si yo le pongo el ancho a la lista del tamaño total de los <li> totales, obviamente quedara centrada, pero el problema es el tamaño de las lista puede variar ( según longitudes de palabras).

si no se entiende pongo un imagen.

Muchas Gracias,
Saludos

[masterojitos]

seria genial si nos das tu html y css....
aun asi, creo que deberias solucionarlo con el text-align: center; y sino,
prueba colocando los textos dentro de una etiqueta contenedora y a esta darle el estilo centrado, algo asi: <li><span>texto</span></li>.

Suerte

[McBlink]

gracias por tu respuesta! ahi pongo el codigo.. el problema no es centrar el texto, sino los elementos <li> que contiene la lista:

Código CSS:

#nav {
    width:1024px;
    height:100%;
    list-style:none;
    margin:auto;
}
#nav li {
    min-width:75px;
    height:100%;
    padding-left:10px;
    padding-right:10px;
    float:left;
    text-align:center;
}
 

le pongo a los <li> un ancho mínimo de 75px y si la palabra es mayor, será mas ancho.. el poblema que la suma de todos los <li> no siempre será 1024px (o casi nunca), entonces quisiera que si hay 1 <li> solo dentro de la lista, se vea centrado dentro de los 1024px que mide la lista.

Gracias!

[masterojitos]

sencillo mi estimado.....
la lista debes encerrarla en un contenedor, ejemplo en un div....
luego el ancho de 1024px lo debe tener el div y la lista ul sin ancho o en auto....
y por ultimo, le das text-align: center al div para que la lista este centrada...

Claro que hay otras maneras, ejemplo usando margin en auto.
Pero prueba eso aver si te sale, sino... como te pedi, tambien postea el html, cosa que te doy una solucion exacta.

Suerte

[McBlink]

No0, lamentablemente no me funciona asi: aca dejo el codigo para ver si hay alguna forma efectiva de hacerlo andar :)

Gracias!

Código HTML:

<div id="nav">
        <a href="#"><li>sdflajldasd</li></a>
        <a href="#"><li>sadasdasdasd</li></a>       
 
 </div>
 

[masterojitos]

arregla tu html porque esta mal codificado.... deberia ser:

Código HTML:

<div id="nav">
    <ul>
        <li><a href="#">abc</a></li>
        <li><a href="#">sdflajldasd</a></li>
    </ul>
</div>
 

Y tu css quedaria asi:

Código CSS:

#nav {
    width: 1024px;
    text-align: center;
}
#nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#nav ul li {
    display: inline;
    padding: 0 10px;
}
 

Listo mi estimado.... espero te sirva de mucho....

Hasta la proxima y gracias por el karma

[McBlink]

Amigo, gracias por tus respuestas.. te comento:
ya habia probado usar la propiedad inline, pero el problema es que no toma la altura de los elementos, nose porque sucede ésto. Creo que todos los elementos con prop inline no toman altura..
y queda bastante mal si no se le puede dar altura.

seria una solución usar div en lugar de <li>, pero seria eso correcto?
alguna otra idea?

Gracias

[jomaruro]

Hola:

Iniciado por McBlink

seria una solución usar div en lugar de <li>, pero seria eso correcto?

No. Lo correcto es que los menús se hagan con listas y en las listas los elementos <li></li> deben ir, obligatoriamente dentro de elementos <ul></ul> tal y como te lo ha indicado masterojitos.

Saludos.