Leçons
Démarrer
Démarrer la formation
CodeGym /Cours /Frontend SELF FR /Alignement du texte

Alignement du texte

Frontend SELF FR
Niveau 15 , Leçon 1
Disponible

6.1 Propriété text-align

Alignement du texte — c'est quasiment l'aspect le plus important de la stylisation des pages web, qui permet de contrôler comment le texte est positionné dans les conteneurs. Le CSS fournit deux propriétés principales pour l'alignement du texte : text-align et vertical-align. Ces propriétés permettent de gérer l'alignement horizontal et vertical du texte respectivement.

La propriété text-align gère l'alignement horizontal du texte à l'intérieur d'un élément bloc. Elle détermine comment le texte est aligné par rapport aux bordures de l'élément.

Valeurs

  • left : alignement du texte à gauche (par défaut pour le texte de gauche à droite)
  • right : alignement du texte à droite (par défaut pour le texte de droite à gauche)
  • center : centrage du texte
  • justify : alignement du texte aux bords gauche et droit, en ajoutant des espaces entre les mots pour distribuer le texte uniformément sur toute la largeur du conteneur
  • start : alignement du texte au début (bord gauche ou droit selon la direction du texte)
  • end : alignement du texte à la fin (bord droit ou gauche selon la direction du texte)

Exemple d'utilisation :

CSS
    
      .left {
        text-align: left;
      }

      .right {
        text-align: right;
      }

      .center {
        text-align: center;
      }

      .justify {
        text-align: justify;
      }
HTML
    
      <body>
        <p class="left">Ce texte est aligné à gauche.</p>
        <p class="right">Ce texte est aligné à droite.</p>
        <p class="center">Ce texte est centré.</p>
        <p class="justify">Ce texte est justifié. Il sera étiré de sorte que le texte occupe toute la largeur du conteneur.</p>
      </body>

6.2 Propriété vertical-align

La propriété vertical-align gère l'alignement vertical d'un élément par rapport à la ligne de base de son parent. Elle est le plus souvent utilisée pour aligner des éléments en ligne, tels que des images, des lignes de texte ou des tableaux, verticalement dans une ligne de texte ou un autre conteneur.

Valeurs :

  • baseline : alignement sur la ligne de base du parent (valeur par défaut)
  • sub : alignement comme un indice
  • super : alignement comme un exposant
  • text-top : alignement sur le sommet de la police du parent
  • text-bottom : alignement sur le bas de la police du parent
  • middle : alignement au milieu du parent
  • top : alignement en haut du conteneur
  • bottom : alignement en bas du conteneur
  • Valeur en pourcentage : décalage de l'élément par le pourcentage indiqué par rapport à la hauteur de la ligne

Exemple d'utilisation :

CSS
    
      .container {
        height: 100px;
        border: 1px solid #000;
      }

      .baseline {
        vertical-align: baseline;
      }

      .sub {
        vertical-align: sub;
      }

      .super {
        vertical-align: super;
      }

      .text-top {
        vertical-align: text-top;
      }

      .text-bottom {
        vertical-align: text-bottom;
      }

      .middle {
        vertical-align: middle;
      }

      .top {
        vertical-align: top;
      }

      .bottom {
        vertical-align: bottom;
      }

      .percent-50 {
        vertical-align: 50%;
      }
HTML
    
      <body>
        <div class="container">
          <span class="baseline">baseline</span>
          <span class="sub">sub</span>
          <span class="super">super</span>
          <span class="text-top">text-top</span>
          <span class="text-bottom">text-bottom</span>
          <span class="middle">middle</span>
          <span class="top">top</span>
          <span class="bottom">bottom</span>
          <span class="percent-50">50%</span>
        </div>
      </body>
Commentaires
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION