box-align

box-align属性研究

by weiming le

HTML

<h1>box-align属性研究</h1>
<p style="border:1px solid orange; margin:10px; color:#f00;">
要知道这个属性，请配合排列方式box-orient进行测试。水平排列依照竖直方向进行对齐，垂直排列依照水平方向进行对齐。
</p>
<div id="wrap1" class="box">
  <div class="box1">
    <h1>box1</h1>
  </div>
  <div class="box2">
    <h1>box2</h1>
  </div>
  <div class="box3">
    <h1>box3</h1>
  </div>
</div>

CSS

.box { display:-webkit-box; width:960px; border:2px solid orange; -webkit-box-orient:vertical; -webkit-box-align:center; /*可以修改此处查看效果，提供属性：start | center | end | baseline | stretch */}
.box>div { width:300px; }
.box1 { height:100px; background:#333; color:#fff; }
.box2 { height:140px; background:silver; }
.box3 { height:80px; background:#999; color:#fff; }