diff options
Diffstat (limited to 'files/fr/web/css/text-align/index.md')
| -rw-r--r-- | files/fr/web/css/text-align/index.md | 223 |
1 files changed, 223 insertions, 0 deletions
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 +--- +<div>{{CSSRef}}</div> + +<p>La propriété <strong><code>text-align</code></strong> 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.</p> + +<div>{{EmbedInteractiveExample("pages/css/text-align.html")}}</div + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush: css no-line-numbers">/* 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; +</pre> + +<p>La propriété <code>text-align</code> peut être définie grâce à l'un des mots-clés de la liste qui suit.</p> + +<h3 id="Valeurs">Valeurs</h3> + +<dl> + <dt><code>start</code> {{experimental_inline}}</dt> + <dd>Cette valeur a le même effet que la valeur <code>left</code> si la direction du texte va de gauche à droite ou le même effet que <code>right</code> si la direction du texte va de droite à gauche.</dd> + <dt><code>end</code> {{experimental_inline}}</dt> + <dd>Cette valeur a le même effet que la valeur <code>right</code> si la direction du texte va de gauche à droite ou le même effet que <code>left</code> si la direction du texte va de droite à gauche.</dd> + <dt><code>left</code></dt> + <dd>Les contenus en ligne (<em>inline</em>) sont alignés sur le bord gauche de la boîte contenant la ligne.</dd> + <dt><code>right</code></dt> + <dd>Les contenus en ligne (<em>inline</em>) sont alignés sur le bord droit de la boîte contenant la ligne.</dd> + <dt><code>center</code></dt> + <dd>Les contenus en ligne (<em>inline</em>) sont horizontalement centrés par rapport à la boîte contenant la ligne.</dd> + <dt><code>justify</code></dt> + <dd>Le texte est justifié. Les bords gauche et droit du texte sont alignés avec les bord gauche et droit du paragraphe.</dd> + <dt><code>justify-all</code>{{experimental_inline}}</dt> + <dd>Comportement analogue à <code>justify</code> mais avec la dernière ligne nécessairement justifiée.</dd> + <dt><code>match-parent</code> {{experimental_inline}}</dt> + <dd>Semblable à <code>inherit</code> mais les valeurs <code>start</code> et <code>end</code> sont calculées selon la valeur de {{cssxref("direction")}} pour le parent et sont remplacées par <code>left</code> ou <code>right</code> selon ce qui est adéquat.</dd> + <dt>{{cssxref("<string>")}} {{experimental_inline}}</dt> + <dd>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.</dd> +</dl> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +{{csssyntax}} + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Alignement_à_gauche">Alignement à gauche</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: 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></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">.exemple { + text-align: left; + border: solid; +}</pre> + +<h4 id="Résultat">Résultat</h4> + +<p>{{EmbedLiveSample("Alignement_à_gauche","100%","100%")}}</p> + +<h3 id="Texte_centré">Texte centré</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: 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></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">.exemple { + text-align: center; + border: solid; +}</pre> + +<h4 id="Résultat_2">Résultat</h4> + +<p>{{EmbedLiveSample("Texte_centré","100%","100%")}}</p> + +<h3 id="Justification">Justification</h3> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: 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></pre> + +<h4 id="CSS_3">CSS</h4> + +<pre class="brush: css">.exemple { + text-align: justify; + border: solid; +}</pre> + +<h4 id="Résultat_3">Résultat</h4> + +<p>{{EmbedLiveSample("Justification","100%","100%")}}</p> + +<h3 id="Notes">Notes</h3> + +<p>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 <code>left</code> et <code>right</code> à <code>auto</code>, e.g. :</p> + +<pre class="brush: css">.classe { + margin: auto; +} +</pre> + +<pre class="brush: css">.classe { + margin: 0 auto; +} +</pre> + +<pre class="brush: css">.classe { + margin-left: auto; + margin-right: auto; +} +</pre> + +<h2 id="Accessibilité">Accessibilité</h2> + +<p>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.</p> + +<ul> + <li><a href="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">Comprendre les règles WCAG 1.4</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html"><em>Understanding Success Criterion 1.4.8 | Understanding WCAG 2.0</em> (en anglais)</a></li> +</ul> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS Logical Properties', '#text-align', 'text-align')}}</td> + <td>{{Spec2('CSS Logical Properties')}}</td> + <td>Aucun changement</td> + </tr> + <tr> + <td>{{SpecName('CSS4 Text', '#alignment', 'text-align')}}</td> + <td>{{Spec2('CSS4 Text')}}</td> + <td>Ajout de la gestion des valeurs <code><string></code>.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Text', '#text-align-property', 'text-align')}}</td> + <td>{{Spec2('CSS3 Text')}}</td> + <td>Ajout des valeurs <code>start</code>, <code>end</code> et <code>match-parent</code>. La valeur initiale qui n'était pas nommée est bien définie avec <code>start</code>.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'text.html#alignment-prop', 'text-align')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Aucun changement</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#text-align', 'text-align')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{Compat("css.properties.text-align")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{cssxref("margin","margin:auto")}}</li> + <li>{{cssxref("margin-left","margin-left:auto")}}</li> + <li>{{cssxref("vertical-align")}}</li> +</ul> |