Le Tutoriel de CSS text-align

CSS text-align

1. CSS text-align

La propriété (property) CSS text-align est utilisé pour un élément de bloc (block element) ou une cellule (cell) de table pour aligner son contenu horizontalement (Horizontal align).

/* Keyword values */
text-align: left;
text-align: right;
text-align: center;
text-align: justify;

/* Character-based alignment in a table column */
text-align: ".";
text-align: "." center;

/* Global values */
text-align: inherit;
text-align: initial;
text-align: unset;

Valeur	Description
left	Aligne le contenu d'un élément vers la gauche.
right	Aligne le contenu d'un élément à droite
center	Aligne le contenu d'un élément sur le centre (center).
justify	Essaie d'ajuster l'espacement entre les mots (ou le contenu inligne (inline content)) de sorte que chaque ligne (line) ait une longueur égale à la largeur de l'élément courant, sauf la dernière ligne.

La valeur par défaut de l'alignement de CSS text-align dépend de la direction de l'élément. Si la direction de l'élément est "Left-to-Right", la valeur par défaut de CSS text-align est à left, alors que si la direction de l'élément est "Right-to-Left", la valeur par défaut du CSS text-align est right.
Le Tutoriel de Attribut HTML dir

text-align-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>CSS text-align</title>
      <meta charset="UTF-8"/>
      <style>
          #my-div {
            background-color: #eee;
            min-height: 135px;
            padding: 5px;
            text-align: left;
          }
          #my-div span {
            background-color: yellow;
          }
      </style>
      <script>
          function changeTextAlign(event)  {
             var textAlign = event.target.value;
             var div = document.getElementById("my-div");
             div.style.textAlign = textAlign;
          }
      </script>
   </head>
   <body>
       <h1>CSS text-align</h1>
       <input type="radio" name="my-radio" value="left" onclick="changeTextAlign(event)" checked/> Left<br>
       <input type="radio" name="my-radio" value="right" onclick="changeTextAlign(event)"/> Right<br>
       <input type="radio" name="my-radio" value="center" onclick="changeTextAlign(event)"/> Center<br>
       <input type="radio" name="my-radio" value="justify" onclick="changeTextAlign(event)"/> Justify<br>
       <hr/>
       <div id = "my-div">
           Apollo 11 was the spaceflight that landed the first humans,
           Americans <span>Neil Armstrong</span> and <span>Buzz Aldrin</span>,
           on the Moon on July 20, 1969, at 20:18 UTC.
           <span>Armstrong</span> became the first to step onto the lunar
           surface 6 hours later on July 21 at 02:56 UTC.

           <span>Armstrong</span> spent about three and a half two
           and a half hours outside the spacecraft,
           <span>Aldrin</span> slightly less; and together they
           collected 47.5 pounds (21.5 kg) of lunar material
           for return to Earth. A third member of the mission,...
       </div>
   </body>
</html>

Lorsque CSS text-align s'applique à un élément, il fonctionne avec tous les contenus inligne (inline content) de cet élément, par exemple, le contenu texte, les éléments enfants tels que <span>, etc. Mais il n'a pas d'effet sur les éléments de bloc enfant de l'élément courant.

Voir les exemples suivant :

L'élément DIV1 est établi CSS text-align:center.
L'élément DIV2 est l'élément enfant de DIV1, mais DIV2 n'est pas affecté par CSS text-align:center.

text-align-example2.html

<!DOCTYPE html>
<html>
   <head>
      <title>CSS text-align</title>
      <meta charset="UTF-8"/>
      <style>
          #div1 {
            background-color: #eee;
            min-height: 135px;
            padding: 5px;
            text-align: left;
          }
          #div1 span {
            background-color: yellow;
          }
          #div2 {
            background-color: yellow;
            width: 180px;
            height: 50px;
            padding: 5px;
            margin-top: 10px;
          }
      </style>
      <script>
          function changeTextAlign(event)  {
             var textAlign = event.target.value;
             var div1 = document.getElementById("div1");
             div1.style.textAlign = textAlign;
          }
      </script>
   </head>
   <body>
       <h1>CSS text-align</h1>
       <input type="radio" name="my-radio" value="left" onclick="changeTextAlign(event)" checked/> Left<br>
       <input type="radio" name="my-radio" value="right" onclick="changeTextAlign(event)"/> Right<br>
       <input type="radio" name="my-radio" value="center" onclick="changeTextAlign(event)"/> Center<br>
       <input type="radio" name="my-radio" value="justify" onclick="changeTextAlign(event)"/> Justify<br>
       <hr/>
       <p style="font-style:italic;color:red;">
         CSS text-align cannot align child block elements.
       </p>
       <div id = "div1">
             Apollo 11 was the spaceflight that landed the first humans,
             Americans <span>Neil Armstrong</span> and <span>Buzz Aldrin</span>,
             on the Moon on July 20, 1969, at 20:18 UTC.
             <span>Armstrong</span> became the first to step onto the lunar
             surface 6 hours later on July 21 at 02:56 UTC.

             <span>Armstrong</span> spent about three and a half two
             and a half hours outside the spacecraft,
             <span>Aldrin</span> slightly less; and together they
             collected 47.5 pounds (21.5 kg) of lunar material
             for return to Earth. A third member of the mission,...

            <div id = "div2">
                I am div2, A block element.
            </div>
       </div>
   </body>
</html>

L'exemple d'utilisation CSS margin:auto.

margin-auto-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>CSS margin:auto</title>
      <meta charset="UTF-8"/>
      <style>
          .div1 {
            background-color: #eee;
            min-height: 135px;
            padding: 5px;
            text-align: center;
          }
          .div2 {
            background-color: yellow;
            width: 180px;
            height: 50px;
            padding: 5px;
            margin-top: 10px;
          }
      </style>
   </head>
   <body>
       <h1>CSS margin:auto</h1>
       <hr/>
       <div class = "div1">
            I am div1 {text-align: center;}
            <div class="div2" style="margin-left:auto;margin-right:auto;">
                margin-left:auto;<br/>
                margin-right:auto;
            </div>
            <div class="div2" style="margin-right:auto;">
                margin-right:auto;
            </div>
            <div class="div2" style="margin-left:auto;">
                margin-left:auto;
            </div>
       </div>
   </body>
</html>

Le Tutoriel de CSS text-align

1. CSS text-align

Tutoriels CSS

Tutoriels CSS

Articles les plus récents