css box-pack attribute


  Translation results：

box

英[bɒks] 美[bɑ:ks]

n.Box; box-like object; box; sentry room

vt. Put... into a box [box, box]

vt.& vi.Boxing

Third person singular: boxes Plural: boxes Present participle: boxing Past tense: boxed Past participle: boxed

pack

英[pæk] 美[pæk]

n.Pack; a group; a pair of (cards); a group

vt.& vi. (Pack...); Stuff; Crowd; (Gather) into a group

vt. Select; Press; Carry; Tighten

vi. Pack; squeeze together; easy to fold and store; leave in a hurry (sometimes used with off)

Third person singular: packs Plural: packs Present participle: packing Past tense: packed Past participle: packed

css box-pack attributesyntax

Function: Specifies where to place the child element when the box is larger than the size of the child element. This property specifies the horizontal position within the horizontal box, and the vertical position within the vertical box.

Syntax: box-pack: start|end|center|justify;

Description: start For boxes in the normal direction, The left edge of the first child is placed on the left (any remaining space after the last child)

, and for boxes in the opposite direction, the right edge of the last child is placed on the right (the first child element is preceded by any remaining space). end For normally oriented boxes, the right edge of the last child is placed to the right (any remaining space before the first child). For boxes with the opposite orientation, the left edge of the first child is placed to the left (and any remaining space after the last child). center divides the excess space equally, with half of the space placed before the first child element and the other half after the last child element. justify splits excess space between each child element (no excess space before the first child and after the last child).

Note: No browser currently supports the box-pack attribute. Firefox supports an alternative -moz-box-pack attribute. Safari, Opera, and Chrome support the alternative -webkit-box-pack attribute.

css box-pack attributeexample

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:350px;
height:100px;
border:1px solid black;
  
/* 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;
}
</style>
</head>
<body>

<div>
<p>我是居中对齐的。</p>
</div>

<p><b>注释：</b>IE 不支持 box-pack 和 box-align 属性。</p>

</body>
</html>

Run instance »

Click the "Run instance" button to view the online instance

Popular Recommendations

Home

Videos

Q&A

submit