sábado, 13 de octubre de 2018

Alineacion y centrado de elementos.

Hoy explico otra forma muy interesante de alinear o centrar elementos tanto en el eje x o y.

Ejemplo: alineado  vertical de un texto de su caja. (alineacion en el eje Y)

<.caja
    <.texto

.caja {
position: relative
height: a determinar;
width: a determinar;
}

.texto {
position: absolute
top: 50%
transform: translateY(-50%)
}

https://codepen.io/pacotiger/pen/EdvMqa

Asombroso, matematicamente obtenemos siempre el mismo resultado, independientemente del tamaño que le demos al contenedor padre, el elemento hijo siempre se centrara o alineara verticalmente (me gusta mas la terminologia de alineacion vertical, que es como viene en ms word).

Creo que de todas las formas conocidas, esta la debere de utilizar mas a menudo, pues es muy responsive, y respeta y se adapta al contenido y los tamaños de cualquier elemento!


No hay comentarios:

Publicar un comentario