标签归档:box-align

CSS 3盒布局之指定水平方向与垂直方向的对齐方式

使用盒布局的时候,可以使用box-pack属性一级box-align属性来指定元素中文字、图像及子元素水平方向或垂直方向的对齐方式,使用这两个属性可以很容易的将文字、图像或子元素放置在元素内的各个部位中。

使用box-pack属性时,火狐中需要需要书写成“-moz-box-pack”,在Safari浏览器或Chrome浏览器中需要书写成“-webkit-box-pack”的形式;

使用box-align属性时,火狐中需要书写成“-moz-box-align”,在Safari浏览器或者Chrome浏览器中需要书写成“-webkit-box-align”的形式。

首先元素需要设置成盒布局:display: box;

box-pack属性及box-align属性指定的属性值和各种属性值的含义如下表所示:

属性值 排列方向 box-pack属性值的含义 box-align属性值的含义
start horizontal 左对齐,文字、图像或子元素被放置在元素最左边 顶部对齐,文字、图像或子元素被放置在元素最顶部
center horizontal 中对其,文字、图像或子元素被放置在元素中部 中部对齐,文字、图像或子元素被放置在元素中部
end horizontal 右对齐,文字、图像或子元素被放置在元素最右边 底部对齐,文字、图像或子元素被放置在元素最底部
start vertical 顶部对齐,文字、图像或子元素被放置在元素最顶部 左对齐,文字、图像或子元素被放置在元素最左边
center vertical 中部对齐,文字、图像或子元素被放置在元素中部 中对其,文字、图像或子元素被放置在元素中部
end vertical 底部对齐,文字、图像或子元素被放置在元素最底部 右对齐,文字、图像或子元素被放置在元素最右边

 

举一个把文字放在盒子最右下角的例子:

样例代码:

.box {
    width: 300px;
    height: 300px;
    border: 1px solid #000;
    display: -webkit-box;
    -webkit-box-pack: end;
    -webkit-box-align: end;
}

样例图片: 

css3 盒布局