Los desarrolladores web a menudo se quejan de tener que luchar para centrar el contenido verticalmente, sin embargo, Materialize lo hace muy fácil.
Así es como funciona.
¿Qué es Materialize?
Materialize es un marco de trabajo de front-end basado en Material Design de Google. Material Design es un lenguaje de diseño que combina los principios clásicos del diseño junto con un marco de trabajo fácil de usar.
Materialize utiliza Flexbox que, según la Mozilla Developer Network , es un modo de diseño para la disposición de los elementos en una página. Ayuda a simplificar los diseños complejos con un código sencillo y limpio.
¿Cómo funciona?
Materialize tiene una clase llamada valign-wrapper que puede centrar el contenido o enviarlo a la parte inferior. Cada navegador interpreta el CSS de una manera diferente, por lo que esta función debe ajustarse en consecuencia.
Veamos cómo Materialize utiliza la clase de alineación vertical en CSS:
.valign-wrapper {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
Parece que el contenido se centra tres veces. Esto se debe a que está utilizando una clase diferente para cada navegador. Materialize logra esto usando algo llamado prefijo. Los prefijos se utilizan para añadir nuevas características CSS a un sitio mientras los navegadores siguen soportando esos estilos.
En este ejemplo, se utilizan dos prefijos: el prefijo WebKit y el prefijo MS. El prefijo WebKit se utiliza para Chrome, el navegador de Android, Safari y algunas versiones de Opera. El prefijo MS se utiliza solo para Internet Explorer.
Si se utiliza una versión antigua de Opera, debe añadirse una clase con el prefijo -o- , o si se utiliza Firefox, el prefijo es -moz-.
Observe que la tercera clase, align-items no tiene prefijo. Algunos navegadores no necesitan un prefijo para utilizar la clase. El navegador hace la interpretación del CSS dependiendo de la clase en la que se encuentre y alinea automáticamente el contenido de forma vertical.
Materialize ha simplificado el proceso de alineación vertical para casi todos los navegadores.
Si quiere saber más sobre nuestros servicios en Encora,
Puntos clave para tener en cuenta
-
Materialize es un marco de trabajo de front-end basado en Material Design de Google. Material Design es un lenguaje de diseño que combina los principios clásicos del diseño junto con un marco de trabajo fácil de usar.
-
Ayuda a simplificar los diseños complejos con un código sencillo y limpio.
-
Materialize tiene todo lo necesario para alinear verticalmente el contenido en casi todos los navegadores.
Acerca de Encora
En Encora, creamos ventajas competitivas para los clientes asociados a través de la innovación tecnológica acelerada. Estaremos encantados de acompañarlo en su viaje.
Por qué Encora
-
Somos globales: Con más de 20 oficinas y laboratorios de innovación en 12 países, Encora está dispersa por todo el mundo. Como operamos en diferentes zonas horarias, siempre hay alguien dispuesto a ayudarlo.
-
Somos un servicio completo: La innovación tecnológica abarca un enorme rango de temas, habilidades y estrategias. Ofrecemos un concepto de servicio completo, cada componente adaptado según sus necesidades, para presentar una solución completa.
-
Nos dedicamos a ello: Nuestro creciente equipo de más de 4.000 programadores, desarrolladores, ingenieros y pensadores estratégicos cualificados y dedicados es la razón por la que Encora se ha convertido en una empresa tecnológica galardonada con una reputación envidiable.
-
Tenemos experiencia: Nos asociamos principalmente con empresas tecnológicas de rápido crecimiento que impulsan la innovación y el crecimiento en sus sectores. Nuestro modelo de entrega único, nuestra metodología ágil y nuestra calidad inigualable han contribuido a nuestro crecimiento constante.
.png)
