12 - La propriété text-align

Vous pouvez changer l'alignement d'un contenu via la propriété "text-align"

p {
	text-align:left; /*Le contenu sera aligné à gauche (comportement par défaut)*/
}
p {
	text-align:center; /* Le contenu sera aligné au centre */
}
p {
	text-align:right; /*Le contenu sera aligné à droite */
}

Attention : text-align ne fonctionne que sur un élément de type "bloc" et n'affectera que des enfants de type "inline"

Ainsi, par exemple, text-align:center; ne fonctionnera pas pour centrer un div dans un div. D'autres méthodes pour centrer un bloc seront abordées plus loin dans ce cours.

Exemples

Alignement simple

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      p {
        background: green;
      }
      .left {
        text-align: left;
      }
      .center {
        text-align: center;
      }
      .right {
        text-align: right;
      }
    </style>
  </head>
  <body>
    <p class="left">Un paragraphe</p>
    <p class="center">Un paragraphe</p>
    <p class="right">Un paragraphe</p>

    <!-- Ne fonctionnear pas-->
    <a href="#" class="center">Un lien</a>
    <!-- Ne fonctionnear pas-->

    <p class="center">
      <a href="#">Un lien</a>
    </p>
  </body>
</html>