CSS3 box-align 属性
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浏览器的支持相对较差。