1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
|
---
title: text-align
slug: Web/CSS/text-align
tags:
- CSS
- Propriété
- Reference
translation_of: Web/CSS/text-align
---
{{CSSRef}}
La propriété **`text-align`** définit l'alignement horizontal d'un élément de bloc ou de la boîte d'une cellule de tableau. Cette propriété fonctionne donc de façon analogue à {{cssxref("vertical-align")}} mais dans le sens horizontal.
{{EmbedInteractiveExample("pages/css/text-align.html")}}Syntaxe
```css
/* Valeurs avec un mot-clé */
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: justify-all;
text-align: start;
text-align: end;
text-align: match-parent;
/* Dans une cellule de tableau, caractère sur lequel */
/* doit être aligné le contenu de la cellule */
text-align: ".";
text-align: "." center;
/* Alignement de bloc (non standard) */
text-align: -moz-center;
text-align: -webkit-center;
/* Valeurs globales */
text-align: inherit;
text-align: initial;
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` {{experimental_inline}}
- : Cette valeur a le même effet que la valeur `left` si la direction du texte va de gauche à droite ou le même effet que `right` si la direction du texte va de droite à gauche.
- `end` {{experimental_inline}}
- : Cette valeur a le même effet que la valeur `right` si la direction du texte va de gauche à droite ou le même effet que `left` si la direction du texte va de droite à gauche.
- `left`
- : Les contenus en ligne (_inline_) sont alignés sur le bord gauche de la boîte contenant la ligne.
- `right`
- : Les contenus en ligne (_inline_) sont alignés sur le bord droit de la boîte contenant la ligne.
- `center`
- : Les contenus en ligne (_inline_) sont horizontalement centrés par rapport à la boîte contenant la ligne.
- `justify`
- : Le texte est justifié. Les bords gauche et droit du texte sont alignés avec les bord gauche et droit du paragraphe.
- `justify-all`{{experimental_inline}}
- : Comportement analogue à `justify` mais avec la dernière ligne nécessairement justifiée.
- `match-parent` {{experimental_inline}}
- : Semblable à `inherit` mais les valeurs `start` et `end` sont calculées selon la valeur de {{cssxref("direction")}} pour le parent et sont remplacées par `left` ou `right` selon ce qui est adéquat.
- {{cssxref("<string>")}} {{experimental_inline}}
- : Lorsque cette valeur est appliquée sur une cellule de tableau, elle indique le caractère sur lequel doit être aligné le contenu de la cellule.
### Syntaxe formelle
{{csssyntax}}
## Exemples
### Alignement à gauche
#### HTML
```html
<p class="exemple">
Il y avait en Vestphalie, dans le château de M. le baron de
Thunder-ten-tronckh, un jeune garçon à qui la nature avait
donné les moeurs les plus douces. Sa physionomie annonçait
son âme. Il avait le jugement assez droit, avec l’esprit le plus
simple ; c’est, je crois, pour cette raison qu’on le nommait Candide.
</p>
```
#### CSS
```css
.exemple {
text-align: left;
border: solid;
}
```
#### Résultat
{{EmbedLiveSample("Alignement_à_gauche","100%","100%")}}
### Texte centré
#### HTML
```html
<p class="exemple">
Il y avait en Vestphalie, dans le château de M. le baron de
Thunder-ten-tronckh, un jeune garçon à qui la nature avait
donné les moeurs les plus douces. Sa physionomie annonçait
son âme. Il avait le jugement assez droit, avec l’esprit le plus
simple ; c’est, je crois, pour cette raison qu’on le nommait Candide.
</p>
```
#### CSS
```css
.exemple {
text-align: center;
border: solid;
}
```
#### Résultat
{{EmbedLiveSample("Texte_centré","100%","100%")}}
### Justification
#### HTML
```html
<p class="exemple">
Il y avait en Vestphalie, dans le château de M. le baron de
Thunder-ten-tronckh, un jeune garçon à qui la nature avait
donné les moeurs les plus douces. Sa physionomie annonçait
son âme. Il avait le jugement assez droit, avec l’esprit le plus
simple ; c’est, je crois, pour cette raison qu’on le nommait Candide.
</p>
```
#### CSS
```css
.exemple {
text-align: justify;
border: solid;
}
```
#### Résultat
{{EmbedLiveSample("Justification","100%","100%")}}
### Notes
La méthode la plus générique pour centrer un bloc plutot que de centrer son contenu est d'utiliser la propriété {{cssxref("margin")}} avec les valeurs `left` et `right` à `auto`, e.g. :
```css
.classe {
margin: auto;
}
```
```css
.classe {
margin: 0 auto;
}
```
```css
.classe {
margin-left: auto;
margin-right: auto;
}
```
## 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.
- [Comprendre les règles WCAG 1.4](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
- [_Understanding Success Criterion 1.4.8 | Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html)
## Spécifications
| Spécification | État | Commentaires |
| ---------------------------------------------------------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- |
| {{SpecName('CSS Logical Properties', '#text-align', 'text-align')}} | {{Spec2('CSS Logical Properties')}} | Aucun changement |
| {{SpecName('CSS4 Text', '#alignment', 'text-align')}} | {{Spec2('CSS4 Text')}} | Ajout de la gestion des valeurs `<string>`. |
| {{SpecName('CSS3 Text', '#text-align-property', 'text-align')}} | {{Spec2('CSS3 Text')}} | Ajout des valeurs `start`, `end` et `match-parent`. La valeur initiale qui n'était pas nommée est bien définie avec `start`. |
| {{SpecName('CSS2.1', 'text.html#alignment-prop', 'text-align')}} | {{Spec2('CSS2.1')}} | Aucun changement |
| {{SpecName('CSS1', '#text-align', 'text-align')}} | {{Spec2('CSS1')}} | Définition initiale. |
{{cssinfo}}
## Compatibilité des navigateurs
{{Compat("css.properties.text-align")}}
## Voir aussi
- {{cssxref("margin","margin:auto")}}
- {{cssxref("margin-left","margin-left:auto")}}
- {{cssxref("vertical-align")}}
|
