---
title: box-align
slug: Web/CSS/box-align
tags:
  - CSS
  - Non-standard
  - Propriété
  - Reference
translation_of: Web/CSS/box-align
---
<div>{{CSSRef}}{{Non-standard_header}}{{warning("Cette propriété s'inscrivait dans une ancienne version du standard pour le module CSS sur les boîtes flexibles et a été remplacée dans une nouvelle version du standard.")}}</div>

<p>La propriété CSS <strong><code>box-align</code></strong> définit comment un élément aligne son contenu par rapport à l'axe orthogonal à la disposition. L'effet obtenu ne sera visible que s'il y a de l'espace supplémentaire dans la boîte flexible. Voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS" title="CSS/Flexible_boxes">Flexbox</a> pour plus d'informations.</p>

<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
box-align: start;
box-align: center;
box-align: end;
box-align: baseline;
box-align: stretch;

/* Valeurs globales */
box-lines: inherit;
box-lines: initial;
box-lines: unset;
</pre>

<p>La direction de l'élément dépend de son orientation.</p>

<h2 id="Syntaxe">Syntaxe</h2>

<p>La propriété <code>box-align</code> est paramétrée grâce à l'un des mots-clés suivants.</p>

<h3 id="Valeurs">Valeurs</h3>

<dl>
 <dt><code>start</code></dt>
 <dd>La boîte aligne son contenu au début (l'espace restant est alors situé à la fin).</dd>
 <dt><code>center</code></dt>
 <dd>La boîte aligne son contenu sur le centre (l'espace restant est équitablement réparti entre le début et la fin).</dd>
 <dt><code>end</code></dt>
 <dd>La boîte aligne son contenu au début (l'espace restant est alors situé au début).</dd>
 <dt><code>baseline</code></dt>
 <dd>La boîte aligne les lignes de base des contenus (le texte sera sur la même ligne). Cela ne s'applique que si l'orientation de la boîte est horizontale.</dd>
 <dt><code>stretch</code></dt>
 <dd>Les boîtes s'étirent afin qu'il n'y ait plus d'espace restant dans la boîte.</dd>
</dl>

<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>

<pre class="syntaxbox">{{csssyntax}}</pre>

<h2 id="Exemples">Exemples</h2>

<h3 id="CSS">CSS</h3>

<pre class="brush: css">div.exemple {
  display: box;
  display: -moz-box; /* Mozilla */
  display: -webkit-box; /* WebKit */

  /* La boîte est plus grande que ses
     éléments afin que box-pack ait
     un effet */
  height: 400px;

  /* La boîte est plus large que ses
     éléments afin que box-align ait
     un effet */
  width: 300px;

  /* Les éléments fils seront orientés
     verticalement */
  box-orient: vertical;
  -moz-box-orient: vertical; /* Mozilla */
  -webkit-box-orient: vertical; /* WebKit */

  /* On centre les éléments horizontalement */
  box-align: center;
  -moz-box-align: center; /* Mozilla */
  -webkit-box-align: center; /* WebKit */

  /* On les regroupe vers le bas */
  box-pack: end;
  -moz-box-pack: end; /* Mozilla */
  -webkit-box-pack: end; /* WebKit */
}

div.exemple &gt; p {
  /* On réduit les éléments fils pour que
     box-align ait un impact. */
  width: 200px;
}</pre>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;div class="exemple"&gt;
  &lt;p&gt;Je serai deuxième en partant du bas, centré horizontalement.&lt;/p&gt;
  &lt;p&gt;Je serai en bas de div.exemple, centré horizontalement.&lt;/p&gt;
&lt;/div&gt;</pre>

<h3 id="Résultat">Résultat</h3>

<p>{{EmbedLiveSample("Exemples","500","500")}}</p>

<h2 id="Notes">Notes</h2>

<p>Le bord de la boîte qui est indiqué par <code>start</code> dépend de l'orientation de la boîte : si celle-ci est orientée horizontalement, ce sera le côté haut, si elle est orientée verticalement, ce sera le côté bas. Le côté désigné par <code>end</code> est le côté opposé à <code>start</code>.</p>

<p>Si l'alignement est défini via l'attribut HTML <code>align</code>, la déclaration sera alors ignorée.</p>

<h2 id="Spécifications">Spécifications</h2>

<ul>
 <li><a class="external" href="http://www.w3.org/TR/css3-flexbox/">Brouillon de travail pour le module des boîtes flexibles (W3C)</a> {{Note("L'état actuel de cette spécification ne reflète pas l'implémentation de Gecko ou WebKit.")}}</li>
 <li><a class="external" href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">Ancienne version de la spécification</a> {{Note("Les implémentations de WebKit et Gecko reflètent cette version de la spécification.")}}</li>
</ul>

<p>{{cssinfo}}</p>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>

<p>{{Compat("css.properties.box-align")}}</p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li>{{cssxref("align-items")}},</li>
 <li>{{cssxref("box-orient")}},</li>
 <li>{{cssxref("box-direction")}},</li>
 <li>{{cssxref("box-pack")}}.</li>
</ul>