Apprendre à coder sur pierre-giraud.com

DES COURS COMPLETS ET GRATUITS POUR TOUS

CENTRER HORIZONTALEMENT UN ELEMENT HTML GRACE AU CSS

Présentation de l’exercice

L’objet de cet exercice est d’apprendre à centrer horizontalement un élément HTML grâce aux propriétés CSS.

Il va nous falloir distinguer deux cas correspondant aux deux types d’éléments HTML : les éléments de type block et les éléments de type inline.

Pour rappel, un élément HTML de type block va par défaut occuper toute la largeur disponible et va occuper sa propre ligne.

Les éléments de type inline, au contraire, ne vont occuper que la largeur nécessaire à leur contenu et vont pouvoir se placer côte à côte.

Regardez plutôt l’exemple suivant pour vous en persuader :

L’élément HTML p est de type block, strong et em sont inline

On ajoute des bordures à nos éléments pour observer la place qu’ils prennent

Les éléments de type block occupent toute la place disponible

Ici, nous avons créé deux fichiers HTML et CSS que nous avons liés entre eux grâce à l’élément HTML link.

Ensuite, nous avons créé deux paragraphes dans notre fichier HTML dont un contenant les éléments strong et em.

L'élément p est un élément HTML de type block tandis que strong et em sont de type inline.

Enfin, en CSS, nous avons ajouté des marges intérieures et des bordures pour bien voir l’espace pris par les différents types d’éléments.

Centrer horizontalement un élément HTML de type block

La façon la plus simple de centrer un élément de type block est d’utiliser la propriété CSS margin sur l’élément en question et d’utiliser va valeur « auto ». Cela aura pour effet d’attribuer la même marge à gauche et à droite de notre élément.

Cependant, comme les éléments de type block occupent toute la largeur disponible par défaut, nous allons devoir avant tout donner une taille à notre élément afin d’observer le résultat de margin auto.

Lorsque vous centrez horizontalement un élément HTML dans une page, je vous conseille de toujours effectuer un reset CSS des marges intérieures et extérieures de l’élément body afin d’obtenir le même résultat final sur tous les navigateurs.

Dans l’exemple suivant, nous allons centrer un élément HTML div ainsi qu’un paragraphe contenu dans notre div.

Retenez bien qu’on centre toujours un élément HTML par rapport à son élément parent direct.

Création des éléments HTML div et p

On centre horizontalement des éléments HTML de type block

Les éléments HTML de type block ont été centrés grâce à margin

On commence donc par créer notre div et on y inclut un titre (élément h1) et un paragraphe (élément p).

Ensuite, en CSS, on centre notre div dans la page en lui donnant une taille (80% du body) et grâce à la propriété margin.

On fait de même avec notre paragraphe. Retenez bien que les pourcentages attribués correspondent à des tailles relatives aux tailles des éléments parents des éléments ciblés.

Par exemple, le parent de notre div est l’élément body. Notre div occupera donc 80% de la largeur du body. Pour notre élément p, son parent est l’élément div.

Centrer horizontalement un élément HTML de type inline

Dans ce nombreux cas, il ne va pas être pertinent de centrer horizontalement des éléments inline HTML.

Par exemple, si l’on prend l’exemple d’un élément strong placé dans un paragraphe, il n’y a aucune raison de centrer cet élément (cela fera se chevaucher le texte et le résultat graphique sera mauvais).

Cependant, nous allons parfois vouloir centrer certains éléments de type inline, comme l'élément button qui sert, comme son nom l'indique, à créer des boutons.

De plus, nous allons encore vouloir souvent centrer un texte en soi (le "contenu" d'un élément) dans son élément. Par exemple, on va vouloir centrer un texte contenu dans un élément p ou encore dans un élément de type h par exemple.

Le problème est que dans ces deux cas la solution margin: 0 auto ne va pas fonctionner.

A la place, nous allons devoir utiliser la propriété CSS text-align et sa valeur center sur l’élément parent de l’élément inline ou du contenu textuel à centrer.

Prenons immédiatement un nouvel exemple et essayons de centrer les textes dans nos paragraphes ainsi qu'un élément button.

Centrer un élément inline

On centre un élément HTML inline avec text-align

Notre élément button et notre contenu textuel son bien centrés avec text-align

Nous savons désormais centrer automatiquement n'importe quel élément HTML.