CSS3 box-align property
Examples
The child element of the div using both box-align and box-pack centered properties:
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;
}
try it"
In the bottom of this page for more examples.
Browser Support
At present, all major browsers do not support box-align property.
Internet Explorer 10 by private property -ms-flex-align support.
Firefox by private property - MOZ-box-align support.
Safari and Chrome by private property -WebKit-box-align support.
Note: Internet Explorer 9 and earlier versions do not support IE elasticity box.
Attribute definitions and instructions
box box- align attribute specifies how child elements are aligned.
| Defaults: | stretch |
|---|---|
| inherit: | no |
| version: | CSS3 |
| JavaScript syntax: | object .style.boxAlign = "center" |
grammar
box-align: start|end|center|baseline|stretch;
| value | Explanation |
|---|---|
| start | For normal direction boxes, the top edge of each child element is placed along the top of the box. On the box along the bottom of the reverse case, the bottom edge of each sub-element |
| end | For normal direction boxes, the top edge of each child element is placed along the bottom of the box. Reverse box, the bottom of each sub-element is placed along the top of the box |
| center | Any extra space is divided evenly, more than half of child elements on top, the rest of the sub-elements on the other half |
| baseline | If the box-orient is embedded uniaxial or transverse, all the sub-elements are placed in their baseline alignment |
| stretch | Child elements stretch to fill the containing block |
Online examples
Change the value of an element box alignment
This example demonstrates how to use JavaScript to change the value of an element of box-align.