Centrer des éléménts [Prog HTML] - Rado Rakotonarivo Personnal Page

Centrer des éléments html

Considérons le code html suivant :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="box-1">
  <div class="box-2">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
      incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
      exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </p>
  </div>
  <div class="box-2">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
      incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
      exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </p>
  </div>
</div>

Notre objectif sera de centrer les deux div de classe .box-2 dans leur conteneur .box-1. Puis, de centrer les paragraphes à l’intérieur des .box-2. Pour finalement obtenir le résultat d’affichage suivant:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Les règles css suivantes permettent d’appliquer des couleurs de fond à nos div ainsi qu’aux paragraphes. Et en même temps de centrer les paragraphes dans les .box-2.

.box-1 {
  background: #ffeaa7;
  padding-top: 1em;
  padding-bottom: 1em;
}

.box-2 {
  background: #e17055;
  width: 70%;
  padding: .75em; /* Mettre une seule valeur pour toutes les marges intérieurs permet de centrer le contenu*/
}

.box-2 p {
  background: #dfe6e9;
  opacity: .75;
  text-align: justify;
}

Non centré

Centrer avec `margin: auto;`

Spécifier une width pour l'élément
Définir margin: auto; pour l'élément

Centrer avec `display: flex;`

Mettre le conteneur en display: flex;
Disposer les éléménts en colonnes
Centrer par rapport à l'axe des lignes align-items: center;

Le box-sizing

Cette propriété ayant pour valeur par défaut content-box permet de spécifier si la taille donnée à l'élément s'applique uniquement sur son contenu ou doit prendre en compte les marges intérieures et les bordures.

Par exemple les deux div suivantes sont de même largeur et même hauteur: (imaginons 500px x 150px)

La première est en box-sizing: border-box;, la largeur 500px comprend à la fois le contenu, le padding et la taille des bordures
La deuxième est en box-sizing: content-box; : 500px est la largeur disponible pour le contenu.

Centrer des éléments html

Non centré

Centrer avec margin: auto;

Centrer avec display: flex;

Le box-sizing

Centrer avec `margin: auto;`

Centrer avec `display: flex;`