CSS3 box-pack 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, 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"
Browser Support
The current mainstream browsers do not support box-pack attribute.
Internet Explorer 10 using the -ms-flex-pack property property instead support.
Firefox by private property - MOZ-box-pack support.
Safari, Opera, and Chrome through private property -webkit-box-pack support.
Note: Internet Explorer 9 and earlier versions of IE do not support flexible box.
Attribute definitions and instructions
box-pack box attribute specifies when a child element is placed in the box of the child element is smaller than the box.
This attribute specifies the cross frame horizontal position, vertical position of the vertical frame.
| Defaults: | start |
|---|---|
| inherit: | no |
| version: | CSS3 |
| JavaScript syntax: | object .style.boxPack = "center" |
grammar
box-pack: start|end|center|justify;
| value | Explanation |
|---|---|
| start | For the general direction of the boxes, the first child is placed in the left edge of the left side (the last child element of all the extra space after standing). For the reverse boxes, the right edge of the last child element is placed on the right side (all the extra space is placed before the first child element of) |
| end | For normal direction boxes, the last child element of the right edge placed to the right (all first child extra space before). For the reverse boxes, the first child of the left edge on the left side (the last child element of all the extra space after) |
| center | The extra space is divided evenly into two halves, the first half is placed first child, place the other half of the last child element |
| justify | The average additional space allocated to each sub-element |