Quienes aún os sintáis apegados a la old school del HTML (y no queréis ni oir hablar de XHTML) deberíais saber que desde el 7 de Marzo de 2007 (y hasta el 31 de Diciembre de 2010) el W3C —World Wide Web Consortium— ha recuperado la actividad HTML de forma separada al desarrollo del XHTML. Para que luego os quejéis.
(No Ratings Yet)
Loading ...
Textos de una sola línea pueden ser alineados con la propiedad CSS text-align, indicando para ella un valor de igual altura que el elemento contenedor. Sencillo.
Pero cuando hay que centrar verticalmente más de una línea de texto, este sistema evidentemente falla. Pero no nos sirve tampoco con indicar top:50% o bottom:50% puesnos alinearía a media altura la 1ª línea del texto, cayendo el resto a partir de ahí.
La idea sería utilizar la propiedad vertical-align pero como sólo funciona en elementos inline, deberíamos usar display:table y display:table-cell para las etiquetas div contenedoras...
...pero IE no reconoce display:table, así que la solución es posicionar un div relativo dentro de un div absoluto, el cual a su vez esté dentro de uno relativo. O sea, tendremos un contenedor con position:relative y dentro de él pondremos un div con position:absolute con top: 50%, y dentro de este último otro div con position:relative y posicionado en top: -50%. Esto funcionará también en IE, y validará.
Ver código para entender cómo se han habilitado estilos para los distintos navegadores.
Código de Emblematiq adaptado:
<style type="text/css">
<!–
#contenedor {
width:500px;
height:300px;
padding:0px;
}
#fijo {
float:right;
width:200px;
height:300px;
background:#666;
display:block;
}
#contenedor>#flotando { /*display:table for Mozilla & Opera*/
display:table;
position:static;
}
#flotando { /*for IE*/
width:300px;
height:300px;
background:#EAEAEA;
position:relative;
}
#flotando div { /*for IE*/
position:absolute;
top:50%;
}
#flotando>div { /*for Mozilla and Opera*/
display:table-cell;
vertical-align:middle;
position:static;
}
#flotando div div {
position:relative;
top:-50%;
}
–>
</style>
</head>
<body>
<div id="contenedor">
<img src="imagen-fija-de-contenido.jpg" alt="stuff" id="fijo" />
<div id="flotando"><div><div>
<p>Este codigo es de Emblematiq.com</p>
</div></div></div>
</div></body>
Por otro lado, hay quien dice lo siguiente... (Extraído de los archivos públicos de css-discuss.org cuando alguien pregunta acerca del centrado vertical): "I would not recommend attempting vertical centering. For now, at least. Things will (may) change in the future. In the meantime, let go and enjoy what you got"... un purista absoluto del estándar. De todos modos, a continuación, otro usuario —algo más samaritano— le da al consultante una solución distinta a la presentada aquí.
Via | Emblematiq
(No Ratings Yet) Loading ...
Webcidentes by Alejandro Garcia is licensed under a Creative Commons Reconocimiento-Compartir bajo la misma licencia 3.0 España License.
Based on a work at www.cabezabomba.com.