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 propiedad 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 placeholder selector 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.

 

Como algunas personas han señalado, este método puede causar que algunos elementos se vean borrosos debido a que este es colocado en un medio píxel“. Una solución para esto es fijar un elemento padre para preserve3d.  Como se ve a continuación:

 

.parent-element {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

 

Saludos 😀

Fuente: zerosixthree


Agregar un comentario

Su dirección de correo no se hará público. Los campos requeridos están marcados *

Related Posts

Informática

Linux – Comprimir carpeta o archivos desde consola

Es muy fácil y útil comprimir archivos y sobre todo carpetas enteras desde consola. Es útil a la hora de realizar backups o copias de seguridad de directorios, ya que permite comprimir un directorio entero Read more…

Informática

Función Obtener IP en YII Framework Components

Hola, hace rato no posteaba nada, he estado con hartas cosas he ahí el motivo, ahora les mostraré una función que utilizo en mis sistemas creados en YII para obtener la IP de quien se Read more…

Informática

Ver Imagen ocultando la url con PHP

El día de hoy necesitaba cargar una imagen pero que no se vea su ubicación real, leyendo y leyendo info obviamente de PHP me encontré con la funcion chunk_split() el cual se relaciona con base64_encode, Read more…