Alignement du texte CSS et direction du texte


Table des matières

    Afficher la table des matières


Alignement du texte et direction du texte

Dans ce chapitre, vous découvrirez les propriétés suivantes :

  • text-align
  • text-align-last
  • direction
  • unicode-bidi
  • vertical-align

Alignement du texte

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) :

Exemple

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) :

Exemple

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>



Texte Aligner en dernier

La propriété text-align-last spécifie comment aligner la dernière ligne d'un texte.

Exemple

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>




Direction du texte

La direction et la Les propriétés unicode-bidi peuvent être utilisées pour changer la direction du texte d'un élément :

Exemple

 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>



Alignement vertical

La propriété vertical-align définit l'alignement vertical d'un élément.

Exemple

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>



Les propriétés d'alignement/direction du texte CSS

direction

Spécifie la direction du texte/direction d'écriture

text-align

Spécifie l'alignement horizontal du texte

text-align-last

Spécifie comment aligner la dernière ligne d'un texte

unicode-bidi

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.

vertical-align

Définit l'alignement vertical d'un élément