CSS3 box-packProperty
Example
Use the box-align and box-pack centering properties together on the child elements in a div:
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, Chrome, and Opera */
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, Chrome, and Opera */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
}
Try it Yourself »
Browser Support
Currently, mainstream browsers do not support the box-pack property.
Internet Explorer 10 Usage -ms-flex-pack property PropertycomeinsteadSupported.
Firefox supports it through the private property -moz-box-pack.
Safari, Opera, and Chrome support this through the private property -webkit-box-pack.
Note:Internet Explorer 9 and earlier versions of IE do not support flexbox.
Property Definition and Usage Instructions
The box-pack property specifies how child elements of a box are placed when the child elements in the box are smaller than the box.
This property specifies the horizontal position for horizontal boxes, and the vertical position for vertical boxes.
| Default Value: | start |
|---|---|
| Inherited: | no |
| version: | CSS3 |
| JavaScript Syntax: | object.style.boxPack="center" |
Syntax
box-pack: start|end|center|justify;
| Value | Description |
|---|---|
| start | For boxes with normal direction, the first child element at the left edge is placed on the left side (all extra space is placed after the last child element). For reverse boxes, the last child element at the right edge is placed on the right side (all extra space is placed before the first child element). |
| end | For boxes with normal direction, the right edge of the last child element is placed on the right side (all extra space is placed before the first child element). For reverse boxes, the left edge of the first child element is placed on the left side (all extra space is placed after the last child element). |
| center | The extra space is divided evenly into two halves: the first half is placed before the first child element, and the other half is placed after the last child element. |
| justify | The extra space is distributed equally among each child element. |