devstory

Table des matières

Le Tutoriel de CSS text-align

View more Tutorials:

Suivez-nous sur notre fanpage pour recevoir des notifications chaque fois qu'il y a de nouveaux articles. Facebook

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
leftAligne le contenu d'un élément vers la gauche.
rightAligne le contenu d'un élément à droite
centerAligne le contenu d'un élément sur le centre (center).
justifyEssaie 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.
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>

View more Tutorials:

Peut-être que vous êtes intéressé

Voici des leçons en ligne à part du site web o7planning que nous recommandons. La liste comprend des leçons en ligne et celles en promo.