Es común que muchas de las funcionalidades de CSS o HTML5 aún no hayan evolucionado o mejorado, una de estas es la alineación de contenido o elementos generales en HTML5; otros programadores tendrán su propia técnica o forma de generar la alineación pero siendo sinceros éstas pueden llegar a ser de varias lineas e inclusive repetitivas a lo largo de todo el código.
Para contrarrestar esta técnica sólo se usan tres líneas de código en CSS dónde podremos colocar de manera vertical y alineada todo el contenido en el centro, quedando éste con uniformidad y mejor vista al usuario.
En CSS3 existe la propierdad transform usualmente utilizada para la rotación y escala de elementos, pero si nosotros agregamos la función translateY podemos acomodar los elementos de manera vertical y completamente alineados tal y como se muestra en el siguiente código:
.element{
position: relative;
top: 50%;
transform: translateY(-50%);
}
Como en todo código de CSS3 podemos generar mixins para no escribir el mismo código una y otra vez, de esta forma sólo mandamos a llamar el mixin y queda con la propiedad de alineación sin más. Ejemplo:
@mixin vertical-align {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.element p {
@include vertical-align;
}
Ahora que si eres aficionado de Sass puedes usar un para generar la misma reducción de salida en el código:
%vertical-align {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.element p {
@extend %vertical-align;
}
Lo mejor de todo es que no tienes que preguntarte si funciona en IE9 porque milagrosamente funciona! Déjanos tus comentarios si te ha funcionado más o mejor que la propia técnica que usas y la experiencia que tuviste al ponerlo en práctica.
Original de zerosixthree
