Propriété CSS box-align
Obsolète
Évitez d'utiliser cette fonctionnalité dans de nouveaux projets. Cette fonctionnalité peut être candidate à la suppression des standards web ou des navigateurs.
Non standard: Cette fonctionnalité n'est pas standardisée. Nous déconseillons d'utiliser des fonctionnalités non standard en production, car leur prise en charge par les navigateurs est limitée, et elles peuvent être modifiées ou supprimées. Toutefois, elles peuvent constituer une alternative appropriée dans certains cas où aucune option standard n'existe.
Attention : 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.
La propriété CSS box-align définit comment un élément aligne son contenu par rapport à l'axe orthogonal à la disposition. L'effet obtenu n'est visible que s'il y a de l'espace supplémentaire dans la boîte flexible.
Voir la page Flexbox pour plus d'informations.
La direction de la mise en page dépend de l'orientation de l'élément : horizontale ou verticale.
Syntaxe
/* 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;
Valeurs
Cette propriété est définie par l'un des mots-clés suivants :
start-
La boîte aligne son contenu au début (l'espace restant est alors situé à la fin).
center-
La boîte aligne son contenu sur le centre (l'espace restant est équitablement réparti entre le début et la fin).
end-
La boîte aligne son contenu au début (l'espace restant est alors situé au début).
baseline-
La boîte aligne les lignes de base des contenus (le texte est sur la même ligne). Cela ne s'applique que si l'orientation de la boîte est horizontale.
stretch-
Les boîtes s'étirent afin qu'il n'y ait plus d'espace restant dans la boîte.
Notes
Le bord de la boîte désigné par start pour l'alignement dépend de l'orientation de la boîte :
- Pour les éléments horizontaux,
startcorrespond au bord haut. - Pour les éléments verticaux,
startcorrespond au bord gauche.
Le bord opposé au bord start est désigné par end.
Si l'alignement est défini grâce à l'attribut HTML align, le style est ignoré.
Définition formelle
| Valeur initiale | stretch |
|---|---|
| Applicabilité | éléments avec display qui vaut box ou inline-box |
| Héritée | non |
| Valeur calculée | comme défini |
| Type d'animation | discrète |
Syntaxe formelle
box-align =
start |
center |
end |
baseline |
stretch
Exemples
Définir l'alignement des boîtes
HTML
<div class="exemple">
<p>Je suis deuxième en partant du bas, centré horizontalement.</p>
<p>Je suis en bas de div.exemple, centré horizontalement.</p>
</div>
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 sont 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;
}
Spécifications
Cette propriété ne fait partie d'aucun standard
Compatibilité des navigateurs
Voir aussi
- Les propriétés
align-items,box-orient,box-direction,box-pack