Dans ce chapitre, vous découvrirez les propriétés suivantes :
text-align
text-align-last
direction
unicode-bidi
vertical-align
La propriété text-align
est utilisée pour définir l'alignement horizontal d'un texte.
Un texte peut être aligné à gauche ou à droite, centré ou justifié.
L'exemple suivant montre un texte aligné au centre et aligné à gauche et à droite. (l'alignement à gauche est par défaut si la direction du texte est de gauche à droite et à droite l'alignement est par défaut si la direction du texte est de droite à gauche) :
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
</style>
</head>
<body>
<h1>Heading 1 (center)</h1>
<h2>Heading 2 (left)</h2>
<h3>Heading 3 (right)</h3>
<p>The three headings above are aligned center, left and right.</p>
</body>
</html>
Lorsque la propriété text-align
est définie sur "justify", chaque ligne est étiré de manière à ce que chaque ligne ait la même largeur et que les marges gauche et droite soient directement (comme dans les magazines et les journaux) :
div {
text-align: justify;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
padding: 10px;
width: 200px;
height: 200px;
text-align: justify;
}
</style>
</head>
<body>
<h1>Example text-align: justify</h1>
<p>The text-align: justify; value stretches the lines so that each line has equal width (like in newspapers and magazines).</p>
<div>
In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'
</div>
</body>
</html>
La propriété text-align-last
spécifie comment aligner la dernière ligne d'un texte.
Alignez la dernière ligne de texte en trois éléments <p> :
p.a
{
text-align-last: right;
}
p.b
{
text-align-last: center;
}
p.c
{
text-align-last: justify;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
p.a {
text-align-last: right;
}
p.b {
text-align-last: center;
}
p.c {
text-align-last: justify;
}
</style>
</head>
<body>
<h1>The text-align-last Property</h1>
<h2>text-align-last: right:</h2>
<p class="a">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
<h2>text-align-last: center:</h2>
<p class="b">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
<h2>text-align-last: justify:</h2>
<p class="c">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
</body>
</html>
La direction
et la Les propriétés unicode-bidi
peuvent être utilisées pour changer la direction du texte d'un élément :
p {
direction: rtl;
unicode-bidi: bidi-override;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
direction: rtl;
unicode-bidi: bidi-override;
}
</style>
</head>
<body>
<p>This is the default text direction.</p>
<p class="ex1">This is right-to-left text direction.</p>
</body>
</html>
La propriété vertical-align
définit l'alignement vertical d'un élément.
Définir l'alignement vertical d'une image dans un texte :
img.a {
vertical-align: baseline;
}
img.b {
vertical-align: text-top;
}
img.c {
vertical-align:
text-bottom;
}
img.d {
vertical-align: sub;
}
img.e {
vertical-align: super;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
img.a {
vertical-align: baseline;
}
img.b {
vertical-align: text-top;
}
img.c {
vertical-align: text-bottom;
}
img.d {
vertical-align: sub;
}
img.e {
vertical-align: super;
}
</style>
</head>
<body>
<h1>The vertical-align Property</h1>
<h2>vertical-align: baseline (default):</h2>
<p>An <img class="a" src="sqpurple.gif" width="9" height="9"> image with a default alignment.</p>
<h2>vertical-align: text-top:</h2>
<p>An <img class="b" src="sqpurple.gif" width="9" height="9"> image with a text-top alignment.</p>
<h2>vertical-align: text-bottom:</h2>
<p>An <img class="c" src="sqpurple.gif" width="9" height="9"> image with a text-bottom alignment.</p>
<h2>vertical-align: sub:</h2>
<p>An <img class="d" src="sqpurple.gif" width="9" height="9"> image with a sub alignment.</p>
<h2>vertical-align: sup:</h2>
<p>An <img class="e" src="sqpurple.gif" width="9" height="9"> image with a super alignment.</p>
</body>
</html>
Spécifie la direction du texte/direction d'écriture
Spécifie l'alignement horizontal du texte
Spécifie comment aligner la dernière ligne d'un texte
Utilisé avec la propriété direction pour définir ou renvoyer si le texte doit être remplacé pour prendre en charge plusieurs langues dans le même document.
Définit l'alignement vertical d'un élément