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

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.

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.