How to use css box-align attribute-Front-end Q&A-php.cn

How to use css box-align attribute

青灯夜游

Release： 2019-05-29 09:37:03

Original

3375 people have browsed it

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 css box-align attribute

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;

Copy after login

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>

Copy after login

Rendering:

How to use css box-align attribute

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!