CSS3 box-alignProperty
Example
Use the centering properties box-align and box-pack on the child elements within a div at the same time:
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 Yourself »
More examples at the bottom of this page.
Browser Support
Currently, none of the major browsers support the box-align property.
Internet Explorer 10 supports this through the private property -ms-flex-align.
Firefox supports it via the private property - MOZ-box-align.
Safari and Chrome support it via the private property -WebKit-box-align.
Note:Internet Explorer 9 and earlier IE versions do not support flexbox.
Property definition and usage instructions
The box-align property specifies how the child elements of a box are aligned.
| Default Value: | stretch |
|---|---|
| Inherited: | no |
| version: | CSS3 |
| JavaScript Syntax: | object.style.boxAlign="center" |
Syntax
box-align: start|end|center|baseline|stretch;
| Value | Description |
|---|---|
| start | For boxes with normal direction, the top edge of each child element is placed along the top of the box. For reversed boxes, the bottom edge of each child element is placed along the bottom of the box. |
| end | For boxes with normal direction, the top edge of each child element is placed along the bottom of the box. For reversed boxes, the bottom edge of each child element is placed along the top of the box. |
| center | Any extra space is divided evenly, with half or more of the child elements placed on top and the remaining child elements placed in the other half. |
| baseline | ifbox-orientFor inline single-axis or horizontal layout, all child elements are placed with their baselines aligned. |
| stretch | Child elements stretch to fill the containing block. |
Online Examples
Change an element's box alignment value
This example demonstrates how to use JavaScript to change an element's box-align value.