Home > Article > Web Front-end > How to use css box-align attribute
How to use css box-align attribute
- 青灯夜游Original
- 2019-05-29 09:37:033300browse
css The box-align attribute is used to specify the alignment of the child elements of the box. For example, if box-align:start is set, then for the box in the normal direction, each child element is top-aligned. For reverse-oriented boxes, each child element is bottom-aligned. No browser currently supports the box-align attribute, but IE, Firefox, Safari, and Chrome all support it through private attributes.
How to use the css box-align attribute?
The box-align attribute specifies how the child elements of the box are aligned.
Syntax:
box-align: start|end|center|baseline|stretch;
Attribute value:
start: For a normally oriented box, the top edge of each child element Place 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: Split the extra space equally, with half above the child elements and the other half below them.
baseline: If box-orient is inline single-axis or horizontal, all child elements are aligned to their baseline
stretch: Stretch child elements to fill the containing block.
Note:
No browser currently supports the box-align attribute. Internet Explorer 10 supports this via the private property -ms-flex-align. Firefox supports this via a private attribute - MOZ-box-align. Safari and Chrome support this via the private property -WebKit-box-align.
css box-align attribute example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
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;
}
</style>
</head>
<body>
<div>
<p>我是居中对齐的。</p>
</div>
<p><b>注释：</b>IE 不支持 box-pack 和 box-align 属性。</p>
</body>
</html>Rendering:
The above is the detailed content of How to use css box-align attribute. For more information, please follow other related articles on the PHP Chinese website!