Lista con elementos centrados
4 seguidores
buenas,
¿sabe alguien cómo se puede hacer una lista con los elementos centrados con css?
si pudiese darle un ancho fijo a la lista en principio no tendría problema, ya que podría aplicar un margin auto a los lados, pero el tema es que la lista tiene que ocupar todo el ancho posible.
esto sería el esquema de lo que quiero conseguir:
http://dagi3d.net/temp/lista-centrada.png
el caso es que probé a meter un text-align center al ul y a los li un display: inline (junto al float left, para que estén horizontales) pero nada...
muchas gracias
pseudo
¿Así?
dagi3d
lo acabo de probar, y el problema está en que dentro de los <em>li</em> tengo unos enlaces con el display block que fastidia todo el invento...
nw
si tienes en el 'a' un display:block; pon en el 'li' un float:left; en vez o a la vez que el display:inline;
Y lo de centrar, no se... dandole un padding-left al 'ul'?
No se, está difícil, a lo mejor le tienes que dar un ancho a los 'li' para calcular lo que mide el menú entero.
ozke
Yo no soy nadie en css para dar consejos pero haría que el ul tuviese el tamaño de los 3 il y lo centraria con un margin: 0 auto; y palante :P
pseudo
Perdona, dagi3d, te puse un link que no era el que pensaba. Mira este, yo lo utilicé y me fue de puta madre, no necesita que le pongas display:block a los links porque te cogen los padding top y bottom (cosa esta que no entiendo, ¿eso no debería aplicar solo a elementos de bloque?:
http://css.maxdesign.com.au/listamatic/horizontal31.htm
El div container que meten te sobra, puedes darle esas propiedades a la ul directamente.
pseudo
ozke
Yo no soy nadie en css para dar consejos pero haría que el ul tuviese el tamaño de los 3 il y lo centraria con un margin: 0 auto; y palante :P
dagi3d
si pudiese darle un ancho fijo a la lista en principio no tendría problema, ya que podría aplicar un margin auto a los lados, pero el tema es que la lista tiene que ocupar todo el ancho posible.
:P :wink:
pseudo
pseudo
no necesita que le pongas display:block a los links porque te cogen los padding top y bottom (cosa esta que no entiendo, ¿eso no debería aplicar solo a elementos de bloque?)
Me contesto a mí mismo: cojonudo artículo
dagi3d
gracias por la ayuda, pero es que necesito el display block en los enlaces ya que estos contienen imagenes de fondo que han de cambiar con el hover y no puedo poner el hover en el li ya que eso no funciona en el explorer
al final creo que lo resolveré poniendo algun div a modo de contenedor intentando no guarrear demasiado...
pseudo
dagi3d
necesito el display block en los enlaces ya que estos contienen imagenes de fondo que han de cambiar con el hover
Peropara eso no necesitas el display:block, puedes dar igualmente el padding que necesiten para mostrar esa imagen a los links (teniendo en cuenta que esos paddings top y bottom han de estar también en la ul)...
... creo
dagi3d
por poder se puede, pero el tema es que han de tener un ancho fijo(aparte de meterle un text-indent negativo para ocultar el texto), cosa que solo se puede hacer con un display block
ya lo tengo más o menos solucionado, así que cuando pueda ya lo enseño para que veáis lo que pretendía hacer.
muchas gracias por la ayuda!