Bueno, nos ha parecido interesante dejaros unas líneas de código (extraídas del blog de Sebastian Ekström) que gracias a la nueva compatibilidad con CSS3 de los navegadores modernos permite alinear elementos verticalmente.
.contenido{
position: relative;
top: 50%;
transform: translateY(-50%);
}
Esto siempre ha sido un dolor de cabeza para todos los diseñadores. Hace muchos años cuando existía la hegemonía de la tabla, era todo más fácil. De hecho todavía hay gente que con mal criterio sigue usando tablas para maquetar ciertos contenidos y poder alinearlos en el centro vertical de un espacio.
Otra técnica que no necesita css3 es el posicionamiento absoluto que sin embargo obligaba a conocer la altura del elemento en cuestión o del contenedor de dicho elemento.
.contenedor{
position: relative;
}
.elemento{
position:absolute;
top:50%;
margin-top:-30px /*esta es la altura divida entre dos del elemento que hay que alinear*/
}
Bueno, si queréis afinar un poco más allá podéis crear un mixin que incluya todos los prefijos de navegador necesarios y que pueda ser incluido de forma más ágil:
@mixin vertical-align {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.contenido p {
@include vertical-align;
}
Esperamos que os sirva como ha nosotros nos ha servido y que recordéis que nunca se para de aprender. Testear y evolucionar todo es empezar!!