path: root/files/fr/web/css/text-align/index.html

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

{{csssyntax}}

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

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