box-align CSS3 propriété
Exemples
L'élément de la div utilisant à la fois box-align et les propriétés box-pack centré enfant:
div
{
width:350px;
height:100px;
border:1px solid black;
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
}
{
width:350px;
height:100px;
border:1px solid black;
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
}
Essayez »
Dans le bas de cette page pour plus d'exemples.
support du navigateur
À l'heure actuelle, tous les principaux navigateurs ne supportent pas la propriété de la boîte-align.
Internet Explorer 10 par le soutien privé propriété -ms-flex-align.
Firefox par la propriété privée - MOZ-box-align soutien.
Safari et Chrome par le soutien propriété privée -webkit-box-align.
Remarque: Internet Explorer 9 et les versions antérieures ne prennent pas en charge la boîte d'élasticité IE.
Définition des attributs et des instructions
attribut align de boîte spécifie comment les éléments enfants sont alignés.
| Par défaut: | étendue |
|---|---|
| Héritage: | aucun |
| Version: | CSS3 |
| Syntaxe JavaScript: | objet .style.boxAlign = "center" |
grammaire
box-align: start|end|center|baseline|stretch;
| valeur | explication |
|---|---|
| début | Pour les boîtes de direction normale, le bord supérieur de chaque élément enfant est placé le long de la partie supérieure de la boîte. Dans la boîte le long du fond du boîtier arrière, le bord inférieur de chaque sous-élément |
| fin | Pour les boîtes de direction normale, le bord supérieur de chaque élément enfant est placé le long du fond de la boîte. Boîte inverse, le fond de chaque sous-élément est placé dans la partie supérieure de la boîte |
| centre | Tout espace supplémentaire est divisé à parts égales, plus de la moitié des éléments enfants sur le dessus, le reste des sous-éléments de l'autre moitié |
| référence | Si le box-orient est intégré uniaxial ou transversal, tous les sous-éléments sont placés dans leur alignement de référence |
| étendue | Éléments enfants étirer pour remplir le bloc contenant |
exemples en ligne
Modifiez la valeur d'un alignement de boîte d'élément
Cet exemple montre comment utiliser JavaScript pour changer la valeur d'un élément de la boîte-align.