initial commit

1 files changed, 227 insertions, 0 deletions

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
+---
+<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>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<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("&lt;string&gt;")}} {{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>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Alignement_à_gauche">Alignement à gauche</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p class="exemple"&gt;
+  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.
+&lt;/p&gt;</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">&lt;p class="exemple"&gt;
+  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.
+&lt;/p&gt;</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">&lt;p class="exemple"&gt;
+  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.
+&lt;/p&gt;</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>&lt;string&gt;</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>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<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>