Alignement

Centrer des éléments

Définir une largeur pour un élément, en utilisant la propriété width permet d’éviter que celui-ci ne s’étende sur toute la largeur de son contenant. Ainsi l’élément prendra la largeur définie ; et l’espace restant sera réparti de manière égale entre les deux marges extérieures.

Ainsi, pour aligner des éléments à l’intérieur d’un display:block; tels que des <div>, il faut utiliser margin: auto;.

Remarque : La méthode ci-dessus pour centrer un élément n’aura pas d’effet si la propriété width n’est pas définie ou si la largeur n’est pas définie à 100 %.

Exemple :

div {
    width: 500px; /* L'élément à une largeur de 500 pixels */
    margin: auto; /* L'espace restant est réparti équitablement entre les deux margin afin de centrer l'élément */
}

Centrer du texte

Pour centrer du texte au sein d’un élément, il suffit d’utiliser text-align: center;.

Exemple :

.citation {
    text-align: center; /* Le texte est centré au sein de l’élément */
}

Centrer une image

Centrer une image se fait en réglant les marges extérieures gauche et droite sur auto, au sein d’un élément block.

Exemple :

div img {
    margin-left: auto;
    margin-right: auto; /* L'image sera centrée au sein de la div car les deux marges extérieures gauche et droite sont définies à auto */
}