Foros del Web » Creando para Internet » CSS »

centrar verticalmente texto en un div

Estas en el tema de centrar verticalmente texto en un div en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 21/10/2012, 13:07
Avatar de juanote  
Fecha de Ingreso: enero-2003
Ubicación: Valencia
Mensajes: 285
Antigüedad: 21 años, 2 meses
Puntos: 10
centrar verticalmente texto en un div

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
  #2 (permalink)  
Antiguo 21/10/2012, 13:17
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: centrar verticalmente texto en un div

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
  1. .li a.active {...}
Que aquello me parece complicarse la vida innecesariamente.
  #3 (permalink)  
Antiguo 21/10/2012, 13:54
Avatar de juanote  
Fecha de Ingreso: enero-2003
Ubicación: Valencia
Mensajes: 285
Antigüedad: 21 años, 2 meses
Puntos: 10
Respuesta: centrar verticalmente texto en un div

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
  #4 (permalink)  
Antiguo 21/10/2012, 14:02
 
Fecha de Ingreso: octubre-2012
Mensajes: 45
Antigüedad: 11 años, 6 meses
Puntos: 1
Respuesta: centrar verticalmente texto en un div

text-align:center?
  #5 (permalink)  
Antiguo 21/10/2012, 14:03
Avatar de juanote  
Fecha de Ingreso: enero-2003
Ubicación: Valencia
Mensajes: 285
Antigüedad: 21 años, 2 meses
Puntos: 10
Respuesta: centrar verticalmente texto en un div

tex-align:center es para centrar horizontalmente
  #6 (permalink)  
Antiguo 21/10/2012, 14:03
 
Fecha de Ingreso: octubre-2012
Mensajes: 45
Antigüedad: 11 años, 6 meses
Puntos: 1
Respuesta: centrar verticalmente texto en un div

cierto, perdón.
  #7 (permalink)  
Antiguo 21/10/2012, 14:05
Avatar de mariogl84  
Fecha de Ingreso: noviembre-2002
Ubicación: Barcelona
Mensajes: 433
Antigüedad: 21 años, 5 meses
Puntos: 20
Respuesta: centrar verticalmente texto en un div

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?
__________________
Puedes visitar mi blog sobre HTML, CSS y Wordpress.
  #8 (permalink)  
Antiguo 21/10/2012, 14:11
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: centrar verticalmente texto en un div

Cita:
Iniciado por juanote Ver Mensaje
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...
  #9 (permalink)  
Antiguo 21/10/2012, 14:55
Avatar de juanote  
Fecha de Ingreso: enero-2003
Ubicación: Valencia
Mensajes: 285
Antigüedad: 21 años, 2 meses
Puntos: 10
Respuesta: centrar verticalmente texto en un div

la solucion
display: table-cell; vertical-align:middle;
  #10 (permalink)  
Antiguo 21/10/2012, 15:09
Avatar de mariogl84  
Fecha de Ingreso: noviembre-2002
Ubicación: Barcelona
Mensajes: 433
Antigüedad: 21 años, 5 meses
Puntos: 20
Respuesta: centrar verticalmente texto en un div

En IE7 no te funcionará, ¿es un problema?
__________________
Puedes visitar mi blog sobre HTML, CSS y Wordpress.
  #11 (permalink)  
Antiguo 21/10/2012, 15:46
Avatar de juanote  
Fecha de Ingreso: enero-2003
Ubicación: Valencia
Mensajes: 285
Antigüedad: 21 años, 2 meses
Puntos: 10
Respuesta: centrar verticalmente texto en un div

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

http://tanalin.com/en/projects/display-table-htc/
  #12 (permalink)  
Antiguo 22/10/2012, 01:36
Avatar de mariogl84  
Fecha de Ingreso: noviembre-2002
Ubicación: Barcelona
Mensajes: 433
Antigüedad: 21 años, 5 meses
Puntos: 20
Respuesta: centrar verticalmente texto en un div

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;}
__________________
Puedes visitar mi blog sobre HTML, CSS y Wordpress.
  #13 (permalink)  
Antiguo 22/10/2012, 09:05
Avatar de juanote  
Fecha de Ingreso: enero-2003
Ubicación: Valencia
Mensajes: 285
Antigüedad: 21 años, 2 meses
Puntos: 10
Respuesta: centrar verticalmente texto en un div

Lo hace, pero al darle altura a la clase active
li a["class=active"]{height:47px}
se estropea
  #14 (permalink)  
Antiguo 22/10/2012, 09:27
Avatar de juanote  
Fecha de Ingreso: enero-2003
Ubicación: Valencia
Mensajes: 285
Antigüedad: 21 años, 2 meses
Puntos: 10
Respuesta: centrar verticalmente texto en un div

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

gracias por todo
  #15 (permalink)  
Antiguo 22/10/2012, 11:55
Avatar de flashmax  
Fecha de Ingreso: julio-2012
Ubicación: Bs.As. Argentina
Mensajes: 507
Antigüedad: 11 años, 9 meses
Puntos: 86
Respuesta: centrar verticalmente texto en un div

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> 
__________________
Saludos!
----------------------------------------------------------

Etiquetas: verticalmente
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 19:59.