Saltar al contenido
Fue un desafío alinear elementos como el cuadro de texto principal, el llamado a la acción, las imágenes, los botones en el centro de la pantalla o en dirección vertical.
Pero ahora es realmente fácil con CSS Grids y flexbox.
Como ya sabrás, CSS Grid es el nuevo estándar de diseño para la web.
La alineación vertical de la cuadrícula CSS es un concepto de mover los elementos secundarios de la cuadrícula deseados en la dirección Y o vertical.
Una imagen rápida para entender qué es vertical y horizontal:
Puede ver una imagen de computadora portátil , que es un elemento secundario del contenedor CSS Grid.
Para moverlo al medio, puedes usar align-items: center ;
De manera similar a esto, puede utilizar otros valores de elementos de alineación.
Si quieres moverte en el medio de la pantalla, puedes poner justify-content:center; junto con elementos de alineación: centro;
Nota: Asegúrese de que su contenedor o padre tenga display: grid ; propiedad.
CSS Grid se alinea verticalmente con la forma más corta posible
Sí, existe un formulario breve para alinear los elementos en el medio de la pantalla.
Puede utilizar elementos de lugar: centro ;
Es una forma abreviada de justify-content : center; y alinear elementos : centro;
Si eres nuevo en CSS Grids, deberías consultar una guía completa de trucos de CSS. Su guía es bastante útil.
Continúe y lea: Una guía completa para las cuadrículas CSS
Hicimos un artículo directo sobre CSS justificar contenido: espacio entre . Lo amarás.
