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é css 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 :

donnent l'affichage ci-dessous :

Avec la règle précédente, le texte est centré horizontalement dans la boîte de type 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 règle :

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, etc...

• Les deux fichiers suivants :
  <!-- Fichier html --> <p> Texte </p>
  /*Feuille css*/ p{ border:1px solid brown; height:40px; line-height:40px; /* égale à height pour centrage vertical */ }

  donnent l'affichage ci-dessous :

  texte

• Les deux fichiers suivants :
  <!-- Fichier html --> <p> Texte </p>
  /*Feuille css*/ p{ border:1px solid brown; height:40px; line-height:20px; }

  donnent l'affichage ci-dessous :

  texte

• Les deux fichiers suivants :
  <!-- Fichier html --> <p> Une image bottom <img src="css_images/pthtml.png"> dans une boîte <code>&lt;p&gt;</code>. </p>
  /*Feuille css*/ p{ border:1px solid brown; line-height: 40px; } img{ vertical-align : bottom; }

  donnent l'affichage ci-dessous :

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

• Les deux fichiers suivants :
  <!-- Fichier html --> <p> Une image middle <img src="css_images/pthtml.png"> dans une boîte <code>&lt;p&gt;</code>. </p>
  /*Feuille css*/ p{ border:1px solid brown; line-height: 40px; } img{ vertical-align : middle; }

  donnent l'affichage ci-dessous :

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

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