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>
