Centrado vertical de texto en CSS
3 seguidores
Buenos dias y feliz navidad, llevo ya dos maquetaciones n css con un menu en listado horizontal con texto centrado en Vertical y la ultima lo solucione con vertical-align:-50%, pero esta solucion no vale cuando tiene dos lineas el texto del boton, he visto el hack que hay pero son tres div y no consigo adaptarlo al menu correctamentamente aparte de complicar el codigo una barbaridad, hay alguna mnera sencilla y efectiva q me sirva, gracias.
orange
vertical-align: -50% no existe, o te has confundido al ponerlo o no me extraña que no te funcione
;)
Si pones un enlace al ajemplo podremos verlo mejor, porque con lo que explcias no consigo hacerme una idea.
kassel
se que no existe pero a mi me funciona sera tan sencillo con ul listado, y dentro del li una clase con vertical-align:-50%
y me ha funcionado tambien es verdad que era muy tarde y no puedo decir ahora que sea solo esto me cabas de hacer dudar, orange.
orange
Me la envaino, parece ser que vertical-align acepta porcentajes, pero no me parece un método muy recomendable para centrar verticalmente (de hecho es la primera vez que lo veo).
Para empezar estás utilizando esta propiedad como si fuera un line-height (por eso la cosa no te funciona cuando tienes un par de líneas), pero no sé qué tal soporte tendrá, yo sólo la he visto utilizada en tablas.
Yo te recomenaría utilizar otro método, si enlazas la web donde tienes el problema te podría ayudar más.
kassel
se reduce a:
<code><ul>
<li class="centrado">uno</li>
<li class="centrado">dos</li>
</ul>
.centrado{vertical-aling:-50%;}
li {height:28px; background-image:url("img/fondo.gif");}</code>
se reduce a eso un menu horizontal de listas
(puede estar mal escrito pero creo que se entiende que lo que quiero es algo simple) he visto algo que funciona con varios niveles de capas pero no me vale por que esta dentro del cuerpo y usa posiciones relativas y absolutas.
De todas formas muchas gracias.
dagi3d
y usando el display:table and company por aquello de las tablas como decía orange? (teniendo en cuenta que no pita en explorer, claro)
orange
Prueba algo de este estilo:
<code><ul>
<li class="centrado"><strong>uno</strong></li>
<li class="centrado"><strong>dos</strong></li>
</ul>
li.centrado strong {display: block; margin-top: XXpx;}
li {height:28px; background-image:url("img/fondo.gif");}</code>
En realidad el método es un poco "a ojo", mediante margin o padding (prueba porque a veces el margin no acaba de funcionar del todo bien) "separas" el strong del borde de arriba de la li. De esta forma da una sensación de centrado vertical, pero sin tocar el line-height por si acaso necesitas una opción de 2 líneas.
Por cierto, si es un menú imagino que habrá enlaces, a lo mejor te puedes ahorrar el strong "extra" y meterle las propiedades correspondientes a los propios enlaces.
Edito: Como bien dice Dagi lo del display: table-cell no funciona en Explorer, yo no lo recomiendo
kassel
el temaes que es dinamico y no se si tendrá varias lineas, ya que tiene ancho fijo, ese es mi problema.
orange
Pues por eso te digo que "simules" el centrado vertical con un margin (o padding) y te dejes espacio por si hay más de una línea (el alto de linea lo puedes controlar con el line-height del strong (o la etiqueta que utilices) por si quieres reducirlo para que te quepan bien).