--- 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 > 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"><div class="exemple"> <p>Je serai deuxième en partant du bas, centré horizontalement.</p> <p>Je serai en bas de div.exemple, centré horizontalement.</p> </div></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>