LabEx
EntrarÚnete

Dominio del diseño de cuadrícula centrada

Beginner

This tutorial is from open-source community. Access the source code

Introducción

En este laboratorio, exploraremos el concepto de centrado en una cuadrícula utilizando CSS. Aprenderás cómo centrar horizontal y verticalmente un elemento hijo dentro de un elemento padre utilizando el diseño grid. Al final de este laboratorio, tendrás una comprensión sólida de cómo utilizar las propiedades justify-content y align-items para crear un diseño perfectamente centrado.

Este es un Guided Lab, que proporciona instrucciones paso a paso para ayudarte a aprender y practicar. Sigue las instrucciones cuidadosamente para completar cada paso y obtener experiencia práctica. Los datos históricos muestran que este es un laboratorio de nivel principiante con una tasa de finalización del 100%. Ha recibido una tasa de reseñas positivas del 100% por parte de los estudiantes.

Centrado en una cuadrícula

index.html y style.css ya se han proporcionado en la máquina virtual.

Para centrar un elemento hijo tanto horizontal como verticalmente dentro de un elemento padre, siga estos pasos:

  1. Cree un diseño de cuadrícula utilizando display: grid.
  2. Utilice justify-content: center para centrar el hijo horizontalmente.
  3. Utilice align-items: center para centrar el hijo verticalmente.

Aquí hay una estructura HTML de ejemplo:

<div class="parent">
  <div class="child">Contenido centrado.</div>
</div>

Y el CSS correspondiente:

.parent {
  display: grid;
  justify-content: center;
  align-items: center;
  height: 100px;
}

Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Resumen

¡Felicidades! Has completado el laboratorio de Centrado en una cuadrícula. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.