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 aà la propriété vertical-align. Parmi les valeurs possibles, on trouvera middle, top, bottom, etc...

• 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="css_images/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="css_images/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>.

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.

Code Css :

#boîte_flexible {                   /* Mise en forme de la boîte flexible */
    display: flex;                  /* Déclaration de la flexibilité */
    flex-direction: row;            /* Direction horizontale */
    flex-wrap: nowrap;              /* Passage à la ligne si largeur/hauteur définie */
    justify-content: flex-start;    /* Alignement "horizontal" */
    align-items: flex-start;        /* Alignement "vertical" */
    }			

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