Tema: FAQ's de CSS
Ver Mensaje Individual
  #50 (permalink)  
Antiguo 11/02/2005, 15:19
andreusup
 
Fecha de Ingreso: enero-2005
Mensajes: 34
Antigüedad: 19 años, 1 mes
Puntos: 1
Faq 50

FAQ 50

PREGUNTA ¿Cómo alinear verticalmente un texto dentro de una capa?
RESPUESTA Lo que sigue...

Ejemplo típico/tópico de cabecera con imagen...

<div id="cabecera">
<img src="unaImagen" />
<div><span>Texto a centrar</span></div>
</div>

Esto estaría centrado hor. y verticalmente si en el archivo estilos.css tenemos...

#cabecera{
display:table;
...
}

#cabecera div{
display:table-cell;
/*de este modo podemos aprovechar las opciones de una celda
como por ejemplo vertical-align */
vertical-align:middle;
text-align:center;
}



Vale. Pero esto no se ve bien en el explorer ... qué hacer?

Lo siguiente

#cabecera{
display:table;
...

}

#cabecera div{
_position: absolute;
_top: 50%;
display: table-cell;
vertical-align: middle;
text-align:center;
}

#cabecera span{
_position: relative;
_top: -50%;
}

Para saber más sobre esto podéis visitar los enlaces siguientes...
http://www.jakpsatweb.cz/css/css-ver...-solution.html
http://wellstyled.com/css-underscore-hack.html

o en el foro...
http://www.forosdelweb.com/f4/capas-dreamweawer-205350/

Última edición por andreusup; 11/02/2005 a las 15:20