CSS3 box-align property
May 05, 2021 CSS Reference Manual
Table of contents
By using the box-align and box-pack properties, the child elements of the center div box:
div
{
width:350px;
height:100px;
border:1px solid black;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari、Opera 以及 Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
}
There are more instances at the bottom of the page.
Browser support
There is currently no browser that supports the box-align property.
Firefox supports alternative -moz-box-align properties.
Safari, Opera, and Chrome support alternative -webkit-box-align properties.
Definitions and usages
The box-align property specifies how the child elements of the box are aligned.
| Default: | stretch |
|---|---|
| Inheritance: | no |
| Version: | CSS3 |
| JavaScript syntax: | object .style.boxAlign="center" |
Grammar
box-align: start|end|center|baseline|stretch;
| Value | Describe | Test |
|---|---|---|
| start |
For a box in the normal direction, the top edge of each child element is placed along the top edge of the box. For boxes in the opposite direction, the bottom edge of each child element is placed along the bottom edge of the box. |
Test |
| end |
For a box in the normal direction, the bottom edge of each child element is placed along the bottom edge of the box. For boxes in the opposite direction, the top edge of each child element is placed along the top edge of the box. |
Test |
| center | Split the excess space equally, half above the child element and the other half below the child element. | Test |
| baseline | If the box-orient is inline-axis or horizon, all child elements are aligned with their baselines. | Test |
| stretch | Stretch child elements to fill the containing block |
Try it yourself - example
- Change the box-align value of the element
- This example shows how JavaScript can be used to change the box-align value of an element.