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