LabEx
EntrerRejoindre

Maîtrise de la mise en page en grille centrée

Beginner

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

Introduction

Dans ce laboratoire, nous allons explorer le concept de centrage de grille à l'aide de CSS. Vous allez apprendre à centrer horizontalement et verticalement un élément enfant à l'intérieur d'un élément parent en utilisant la mise en page grid. À la fin de ce laboratoire, vous aurez une compréhension solide de la manière d'utiliser les propriétés justify-content et align-items pour créer une mise en page parfaitement centrée.

Ceci est un Guided Lab, qui fournit des instructions étape par étape pour vous aider à apprendre et à pratiquer. Suivez attentivement les instructions pour compléter chaque étape et acquérir une expérience pratique. Les données historiques montrent que c'est un laboratoire de niveau débutant avec un taux de réussite de 100%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.

Centrage de grille

index.html et style.css ont déjà été fournis dans la machine virtuelle.

Pour centrer un élément enfant horizontalement et verticalement à l'intérieur d'un élément parent, suivez ces étapes :

  1. Créez une mise en page en grille en utilisant display: grid.
  2. Utilisez justify-content: center pour centrer l'enfant horizontalement.
  3. Utilisez align-items: center pour centrer l'enfant verticalement.

Voici une structure HTML d'exemple :

<div class="parent">
  <div class="child">Contenu centré.</div>
</div>

Et le CSS correspondant :

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

Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Sommaire

Félicitations ! Vous avez terminé le laboratoire sur le centrage de grille. Vous pouvez pratiquer d'autres laboratoires sur LabEx pour améliorer vos compétences.