From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/fr/web/css/text-align/index.html | 227 +++++++++++++++++++++++++++++++++ 1 file changed, 227 insertions(+) create mode 100644 files/fr/web/css/text-align/index.html (limited to 'files/fr/web/css/text-align/index.html') diff --git a/files/fr/web/css/text-align/index.html b/files/fr/web/css/text-align/index.html new file mode 100644 index 0000000000..50e54360ba --- /dev/null +++ b/files/fr/web/css/text-align/index.html @@ -0,0 +1,227 @@ +--- +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

+ +
/* 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

+ +
<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

+ +
.exemple {
+  text-align: left;
+  border: solid;
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Alignement_à_gauche","100%","100%")}}

+ +

Texte centré

+ +

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

+ +
.exemple {
+  text-align: center;
+  border: solid;
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Texte_centré","100%","100%")}}

+ +

Justification

+ +

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

+ +
.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. :

+ +
.classe {
+  margin: auto;
+}
+
+ +
.classe {
+  margin: 0 auto;
+}
+
+ +
.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.

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{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

+ + -- cgit v1.2.3-54-g00ecf