From 149319bb8c7b1394a443f0877c3460cd362aa815 Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:58:15 +0200 Subject: move *.html to *.md --- files/fr/web/css/text-align/index.html | 223 --------------------------------- files/fr/web/css/text-align/index.md | 223 +++++++++++++++++++++++++++++++++ 2 files changed, 223 insertions(+), 223 deletions(-) delete mode 100644 files/fr/web/css/text-align/index.html create mode 100644 files/fr/web/css/text-align/index.md (limited to 'files/fr/web/css/text-align') diff --git a/files/fr/web/css/text-align/index.html b/files/fr/web/css/text-align/index.html deleted file mode 100644 index 77b812babb..0000000000 --- a/files/fr/web/css/text-align/index.html +++ /dev/null @@ -1,223 +0,0 @@ ---- -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

- - diff --git a/files/fr/web/css/text-align/index.md b/files/fr/web/css/text-align/index.md new file mode 100644 index 0000000000..77b812babb --- /dev/null +++ b/files/fr/web/css/text-align/index.md @@ -0,0 +1,223 @@ +--- +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