text-align
Baseline
Large disponibilité
*
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.
La propriété CSS text-align définit l'alignement horizontal du contenu de niveau en ligne à l'intérieur d'un élément de bloc ou d'une boîte de cellule de tableau. Cela signifie qu'elle fonctionne comme vertical-align, mais dans la direction horizontale.
Exemple interactif
text-align: start;
text-align: end;
text-align: center;
text-align: justify;
<section id="default-example">
<div id="example-element">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum.
</p>
</div>
</section>
section {
font-size: 1.5em;
}
#default-example > div {
width: 250px;
}
Syntaxe
/* Valeurs avec un mot-clé */
text-align: start;
text-align: end;
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: match-parent;
/* Valeurs d'alignement de bloc (syntaxe non standard) */
text-align: -moz-center;
text-align: -webkit-center;
/* Valeurs globales */
text-align: inherit;
text-align: initial;
text-align: revert;
text-align: revert-layer;
text-align: unset;
La propriété text-align peut être définie grâce à l'un des mots-clés de la liste qui suit.
Valeurs
start-
Identique à
leftsi la direction est de gauche à droite et àrightsi la direction est de droite à gauche. end-
Identique à
rightsi la direction est de gauche à droite et àleftsi la direction est de droite à gauche. left-
Les contenus en ligne sont alignés sur le bord gauche de la boîte de ligne.
right-
Les contenus en ligne sont alignés sur le bord droit de la boîte de ligne.
center-
Les contenus en ligne sont centrés horizontalement dans la boîte de ligne.
justify-
Les contenus en ligne sont justifiés. Les espaces sont répartis pour que les bords gauche et droit du contenu soient alignés avec les bords gauche et droit de la boîte de ligne, sauf pour la dernière ligne.
match-parent-
Semblable à
inherit, mais les valeursstartetendsont calculées selon la propriétédirectiondu parent et sont remplacées par la valeurleftourightappropriée.
Accessibilité
L'espacement créé entre les mots par la justification du texte peut rendre la lecture difficile pour les personnes dyslexiques ou souffrant de troubles cognitifs.
Définition formelle
| Valeur initiale | start, ou une valeur non nommée se comportant comme left si direction est ltr, right si direction est rtl si start n'est pas supporté par le navigateur |
|---|---|
| Applicabilité | conteneurs de type bloc |
| Héritée | oui |
| Valeur calculée | comme défini, sauf pour la valeur match-parent qui est calculée en fonction de la direction du parent et qui vaut soit left, soit right |
| Type d'animation | discrète |
Syntaxe formelle
text-align =
start |
end |
left |
right |
center |
<string> |
justify |
match-parent |
justify-all
Exemples
Aligner au début
HTML
<p class="exemple">
Integer elementum massa at nulla placerat varius. Suspendisse in libero risus,
in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque.
Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>
CSS
.exemple {
text-align: start;
border: solid;
}
Résultat
Centrer le texte
HTML
<p class="exemple">
Integer elementum massa at nulla placerat varius. Suspendisse in libero risus,
in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque.
Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>
CSS
.exemple {
text-align: center;
border: solid;
}
Résultat
Exemple d'utilisation de justify
HTML
<p class="exemple">
Integer elementum massa at nulla placerat varius. Suspendisse in libero risus,
in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque.
Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>
CSS
.exemple {
text-align: justify;
border: solid;
}
Résultat
Aligner les tableaux
Cet exemple démontre l'utilisation de text-align sur les éléments <table> :
- La légende (
<caption>) est alignée à droite. - Les deux premiers en-têtes (
<th>) héritent de l'alignement à gauche défini sur l'en-tête du tableau (<thead>), tandis que le troisième est aligné à droite. - À l'intérieur de l'élément HTML
<tbody>, la première ligne est alignée à droite, la deuxième est centrée, et la troisième utilise l'alignement par défaut (à gauche). - Dans chaque ligne, certaines cellules (c12, c31) sont configurées pour remplacer l'alignement de la ligne.
HTML
<table>
<caption>
Tableau d'exemple
</caption>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th class="right">Col 3</th>
</tr>
</thead>
<tbody>
<tr class="right">
<td>11</td>
<td class="center">12</td>
<td>13</td>
</tr>
<tr class="center">
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr id="r3">
<td class="right">31</td>
<td>32</td>
<td>33</td>
</tr>
</tbody>
</table>
CSS
table {
border-collapse: collapse;
border: solid black 1px;
width: 250px;
height: 150px;
}
thead {
text-align: left;
}
td,
th {
border: solid 1px black;
}
.center {
text-align: center;
}
.right,
caption {
text-align: right;
}
Résultat
Spécifications
| Spécification |
|---|
| CSS Logical Properties and Values Module Level 1 # text-align |
| CSS Text Module Level 3 # text-align-property |
Compatibilité des navigateurs
Voir aussi
- Les propriétés
margin: auto,margin-left: auto,vertical-align