Centrer des éléments HTML

Cours

Centrer est parfois difficile. On abordera quelques méthodes dans cette page, mais on trouvera un article bien plus exhaustif (et en anglais) à ce sujet sur le site css-tricks.

Centrer du texte horizontalement

Les valeurs possibles pour la propriété text-align sont left, right, center et justify. La largeur de la boîte contenant le texte doit être définie préalablement.

Par exemple, les deux fichiers suivants :

/* Feuille css */
p {
    text-align: center;
    border: 1px solid brown; 
}

<!-- Fichier html -->
<p>
    Avec la règle précédente, le texte est centré horizontalement dans la
    boîte <code>&lt;p&gt;</code>.
</p>

donnent l'affichage ci-dessous :

Avec la règle précédente, le texte est centré horizontalement dans la boîte <p>.

Astuce sur le centrage horizontal

On peut centrer horizontalement un bloc (de largeur width définie explicitement) dans un autre bloc en déclarant les marges gauche et droite à la valeur auto.

Appliquer la propriété :
```
margin: 0 auto;
```
donne une marge extérieure haute et basse de 0 pixels et centre horizontalement le bloc selectionné dans le bloc conteneur.

Hauteur d'une ligne de texte

line-height est la hauteur totale d'une ligne (c'est donc la hauteur entre deux lignes). Il sera intéressant de jouer sur cette propriété pour centrer verticalement un élément de type en-ligne grâce à la propriété vertical-align. Parmi les valeurs possibles, on trouvera middle, top, bottom...

Les deux fichiers suivants :

/* Feuille css */
p {
    border: 1px solid brown;
    height: 40px;
    line-height: 40px;       /* égale à height pour centrage vertical */
}

<!-- Fichier html -->
<p>
    Texte
</p>

donnent l'affichage ci-dessous :

texte

Les deux fichiers suivants :

/* Feuille css */
p {
    border: 1px solid brown;
    height: 40px;
    line-height: 20px;
}

<!-- Fichier html -->
<p>
    Texte
</p>

donnent l'affichage ci-dessous :

texte

Les deux fichiers suivants :

/* Feuille css */
p {
    border: 1px solid brown;
    line-height: 40px;
}
img {
    vertical-align: bottom;
}

<!-- Fichier html -->
<p>
    Une image bottom <img src="pthtml.png"> dans une boîte
    <code>&lt;p&gt;</code>.
</p>

donnent l'affichage ci-dessous :

Une image bottom dans une boîte <p>.

Les deux fichiers suivants :

/* Feuille css */
p {
    border: 1px solid brown;
    line-height: 40px;
}
img {
    vertical-align: middle;
}

<!-- Fichier html -->
<p>
    Une image middle <img src="pthtml.png"> dans une boîte
    <code>&lt;p&gt;</code>.
</p>

donnent l'affichage ci-dessous :

Une image middle dans une boîte <p>.

Bac à sable : Boîtes flexibles

La propriété CSS display: flex; permet de définir un conteneur flexible. Ses enfants (les éléments contenus dans cette boîte) deviennent alors automatiquement (sans déclarer quoi que ce soit) flexibles.

La boîte encadrée d'une bordure noire peut devenir flexible, les blocs enfants sont encadrés de pointillés. On trouvera un article plus complet sur le site alsacréations.

fils 1

fils 2

fils 3

fils 4

fils 5

fils 6

fils 7

fils 8

fils 9

fils 10

Code CSS

p {     /* Mise en forme des paragraphes */
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
}

Exercices

Exercice n°1

Centrer horizontalement et verticalement le texte du paragraphe <p> dans l'article.

<!-- Partie html à ne pas modifier -->
<article>
    <p>
        Les petits poissons rouges, les petits pois sont verts.
        A force de taper sur des clous, il était devenu marteau.
    </p>
</article>

/* Partie css modifiable */
article {
    width: 450px;
    height: 180px;
    border: 2px solid blue;
}

p {
    width: 50%;
}