centrar verticalmente texto en un div

juanote · #1 (**permalink**) 21/10/2012, 13:07

Tengo un menu.

Y necesito para la clase "active" del menu
.li a[class="active"]
Conseguir este efecto

Como vereis hay menu de una linea y de dos lineas, horizalmente lo puedo centrar, pero verticalemente no.

Alguna sugerencia?
solo puedo usar una clase

pzin · #2 (**permalink**) 21/10/2012, 13:17

No sé si habrás probado con vertical-align o line-height.

De todas formas, lo correcto, aunque funcione, sería declarar el estilo así:

Código CSS:

Ver original.li a.active {...}

Que aquello me parece complicarse la vida innecesariamente.

juanote · #3 (**permalink**) 21/10/2012, 13:54

ni el vertical-align, ni el line-height es una buen idea

el vertical-align no funciona en div

y el line-height no centra

vtscarlos · #4 (**permalink**) 21/10/2012, 14:02

text-align:center?

juanote · #5 (**permalink**) 21/10/2012, 14:03

tex-align:center es para centrar horizontalmente

vtscarlos · #6 (**permalink**) 21/10/2012, 14:03

cierto, perdón.

mariogl84 · #7 (**permalink**) 21/10/2012, 14:05

Prueba con esto:

Código:

.li {
    height:47px;
    line-height:47px;    
}
.li a {
    display:inline-block; 
    vertical-align:middle; 
    line-height:normal;
}

¿Para qué versiones de IE necesitas soporte?

pzin · #8 (**permalink**) 21/10/2012, 14:11

Cita:

Iniciado por juanote

ni el vertical-align, ni el line-height es una buen idea

el vertical-align no funciona en div

y el line-height no centra

Uhmm.. Vale...

juanote · #9 (**permalink**) 21/10/2012, 14:55

la solucion
display: table-cell; vertical-align:middle;

mariogl84 · #10 (**permalink**) 21/10/2012, 15:09

En IE7 no te funcionará, ¿es un problema?

juanote · #11 (**permalink**) 21/10/2012, 15:46

Conoces -dt-display: table-cell;????

http://tanalin.com/en/projects/display-table-htc/

mariogl84 · #12 (**permalink**) 22/10/2012, 01:36

Si prefieres usar Javascript para emular el CSS, esa solución está bien, pero conseguirás una experiencia de usuario más lenta. Si quieres una solución sólo con CSS, podrías probar el código que te puse arriba, añadiéndole esta línea:

Código:

.li a  { *display  : inline;}

juanote · #13 (**permalink**) 22/10/2012, 09:05

Lo hace, pero al darle altura a la clase active
li a["class=active"]{height:47px}
se estropea

juanote · #14 (**permalink**) 22/10/2012, 09:27

De todos modos, que pongan un detector de versiones
Porque lleva un jquery y con la ie7, tampoco se ve

gracias por todo

flashmax · #15 (**permalink**) 22/10/2012, 11:55

hola te de un ejemplo de centrado vertical:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>

 
<style type="text/css">
 
.contenedor-link {
    width: 100px;
	border: #000 solid 1px;
    height: 100px;
    color:#00CCFF;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:20px;
	}
    
.contenedor-link[class] { 
    display: table;}
    
.centrado {
    position: absolute; 
    top: 50%;}
 
.centrado[class] {
    display: table-cell; 
    vertical-align: middle;
    text-align: center; 
    position: static;
    }
    
.link{
	width: 100px;
    height:auto;
    margin: 0 auto;
    position: relative;
    top: -50%;  
    }

</style>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div class="contenedor-link">
    <div class="centrado">
        <div class="link">link</div>
    </div>
</div>
</body>
 
</html>