CSS box-align属性 - gogoggo_H5之家 - 中国HTML5教程资源分享第一站

box-align属性的定义和用法:
设置或检索弹性盒模型对象的子元素的对齐方式。
查看其兄弟属性box-pack，两者的效果正好（相反）互补。
box-align的对齐方式受box-orient影响。
默认情况下（即box-orient设置为horizontal）start和end所呈现的效果等同于顶部对齐和底部对齐。
当box-orient设置为vertical时，start和end所呈现的效果等同于左对齐和右对齐。
对应的脚本特性为boxAlign。
语法结构:

box-align：start | end | center | baseline | stretch

取值:
stretch：设置弹性盒模型对象的子元素自适应父元素尺寸。
start：设置弹性盒模型对象的子元素从开始位置对齐。
center：设置弹性盒模型对象的子元素居中对齐。
end：设置弹性盒模型对象的子元素从结束位置对齐。
baseline：设置弹性盒模型对象的子元素基线对齐。
浏览器支持:
1.IE9和IE9以下的浏览器不支持此属性。
2.Opera浏览器不支持此属性。
3.Opera、Safari和Chrome浏览器支持此属性。
4.除IE浏览器外暂时需要使用各自浏览器的兼容性写法。
继承性:
无继承性。
代码实例:

蚂蚁部落 h1 .box, .box2 { display display display display display margin padding background list-style .box { -webkit-box-orient -moz-box-orient -o-box-orient -ms-box-orient box-orient width height .box2 { -webkit-box-orient -moz-box-orient -o-box-orient -ms-box-orient box-orient width height #box, #box6 { -webkit-box-align -moz-box-align -o-box-align -ms-box-align box-align #box2, #box7 { -webkit-box-align -moz-box-align -o-box-align -ms-box-align box-align #box3, #box8 { -webkit-box-align -moz-box-align -o-box-align -ms-box-align box-align #box4, #box9 { -webkit-box-align -moz-box-align -o-box-align -ms-box-align box-align #box5, #box10 { -webkit-box-align -moz-box-align -o-box-align -ms-box-align box-align .box li, .box2 li .box li:nth-child(1), .box2 li:nth-child(1) .box li:nth-child(2), .box2 li:nth-child(2) .box li:nth-child(3), .box2 li:nth-child(3)横向排列时子元素从起始位置对齐 box-align:start;123横向排列时子元素居中对齐 box-align:center;123横向排列时子元素从结束位置对齐 box-align:end;123横向排列时子元素基线对齐 box-align:baseline;123横向排列时子元素自适应父元素 box-align:stretch;123纵向排列时子元素从起始位置对齐 box-align:start;123纵向排列时子元素居中对齐 box-align:center;123纵向排列时子元素从结束位置对齐 box-align:end;123纵向排列时子元素基线对齐 box-align:baseline;123纵向排列时子元素自适应父元素 box-align:stretch;123

原文地址是:?mod=viewthread&tid=1401

更多内容可以参阅: