Le Tutoriel de CSS text-align
View more Tutorials:
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.
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>