css box-align property


  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

align

UK[əˈlaɪn] US[əˈlaɪn]

vt. Make a line, make an alliance; line up in order

vi. Arrange; form a line

Third person singular: aligns Present participle: aligning Past tense: aligned Past participle: aligned

css box-align propertysyntax

Function: Specifies how to align the child elements of the box.

Syntax: box-align: start|end|center|baseline|stretch;

Description: start For normal direction A box with the top edge of each child element placed along the top edge of the box. For reverse-oriented boxes, the lower edge of each child element is placed along the bottom edge of the box. end For a normally oriented box, the lower edge of each child element is placed along the bottom edge of the box. For reverse-oriented boxes, the top edge of each child element is placed along the top edge of the box. center divides the extra space equally, with half above the child element and half below it. baseline If box-orient is inline-axis or horizontal, all child elements are aligned with their baseline. stretch Stretch child elements to fill the containing block

Note: No browser currently supports the box-align attribute.

css box-align propertyexample

<!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;

/* W3C */
display:box;
box-pack:center;
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