Apprenez le centrage vertical et horizontal avec display: table

Introduction

Dans ce laboratoire, nous allons apprendre à centrer un élément enfant à l'intérieur de son élément parent en utilisant display: table. En utilisant cette technique, nous pouvons facilement réaliser le centrage vertical et horizontal sans avoir à recourir à des positions complexes ou à JavaScript. C'est une compétence utile à avoir lors de la conception de maquettes réactives pour des sites web et des applications.

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 avec display: table

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

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

Ajoutez un élément conteneur avec une height et une width fixes.

<div class="container"></div>

Ajoutez l'élément enfant à l'intérieur de l'élément conteneur et donnez-lui une classe .center.

  <div class="center"><span>Contenu centré</span></div>
</div>

Dans le CSS, appliquez les styles suivants à l'élément conteneur :

Fixez height et width aux valeurs fixes souhaitées.
Ajoutez une bordure (facultatif).

.container {
  border: 1px solid #9c27b0;
  height: 250px;
  width: 250px;
}

Dans le CSS, appliquez les styles suivants à l'élément enfant :

Utilisez display: table pour faire en sorte que l'élément .center se comporte comme un élément <table>.
Fixez height et width à 100% pour que l'élément remplisse l'espace disponible à l'intérieur de son élément parent.
Utilisez display: table-cell sur l'élément enfant pour le faire se comporter comme un élément <td>.
Utilisez text-align: center et vertical-align: middle sur l'élément enfant pour le centrer horizontalement et verticalement.

.center {
  display: table;
  height: 100%;
  width: 100%;
}

.center > span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

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.

Résumé

Félicitations ! Vous avez terminé le laboratoire sur le centrage avec display: table. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.