CSS3 box-align 属性

CSS3 box-align 属性用于定义子元素如何垂直对齐在父级容器中。

语法

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

• stretch：子元素在容器中被拉伸到与容器高度相等。
• center：子元素在容器中居中对齐。
• start：子元素在容器中顶部对齐。
• end：子元素在容器中底部对齐。
• baseline：子元素在容器基线对齐。

示例

.parent {
    display: flex;
    height: 200px;
    align-items: center;
    justify-content: center;
}

.child {
    width: 100px;
    height: 50px;
    background-color: pink;
    box-align: end;
}

在上面的示例中，我们定义父级容器的高度为200px，并使用Flex布局让子元素居中对齐。然后，我们将子元素的高度设置为50px，使用背景颜色为pink，并将box-align属性设置为end，这将导致子元素底部对齐。

浏览器兼容性

box-align属性对于现代浏览器具有很好的支持，包括Chrome、Firefox、Safari和Opera。但是，该属性对于IE浏览器的支持相对较差。