CSS3 盒元素中元素的对齐方式

CSS3新增的box-pack和box-align可设置子元素在盒元素内部的水平和垂直

对齐方式。

box-pack:设置子元素在水平方向上的对齐方式。其取值有：start、end、center

、justify。

start是默认值，表示所有的子元素都显示在盒元素的左侧，额外空间将显示在

盒元素的右侧。

如下图所示：最外层的div设置了宽和高，并设置了边框的，便于显示该元

素的具体区域，其display值为box

此时元素都从左向右排列，右边多余的部分将以空格形式显示。

end；表示所有的子元素都显示在盒元素的右侧，额外空间将显示在

盒元素的左侧。与默认值的排列方向相反。

center：所有子元素居中显示，额外的空间平均分配在两侧。如下图所示。

justify：表示所有元素散开显示，额外的空间将在子元素间平均分配。在第一个

子元素之前和最后一个子元素之后不分配空间。

box-align：设置子元素在垂直方向上的对齐方式。属性值：start、end、center、baseline

、stretch，可依据上述方法进行测试。

注：以上两个属性，务必首先定义元素为盒元素，然后再在盒元素的属性中设置其子元素的对齐方式。