网站地图    收藏   

主页 > 前端 > css教程 >

css3设置box-pack和box-align让div里面的元素垂直居中

来源:自学PHP网    时间:2014-12-15 16:20 作者: 阅读:

[导读] 只要设置元素的box-pack和box-align即可,这两个属性当前只有webkit和moz支持,要设置垂直居中的话只需要将这两个属性的值都设置为center即可,需要的朋友可以参考下...

只要设置元素的box-pack和box-align即可,这两个属性当前只有webkit和moz支持,要设置垂直居中的话只需要将这两个属性的值都设置为center即可,需要的朋友可以参考下
以前处理垂直居中用的方法是设置div的height和line-height是一样的值,现在就不用那么麻烦了。只要设置元素的box-pack和box-align即可,这两个属性当前只有webkit和moz支持。其中box-pack控制的是水平的左和右,取值有:start(居左),center(居中),end(居右)。box-align的取值有:start(居上),center(居中),end(居下)。如果我们要设置垂直居中的话只需要将这两个属性的值都设置为center即可。当然了,这个前提是使用css3的盒布局,即将外层元素的display设置为box

复制代码
代码如下:

<style type="text/css">
#container{
display: box;
display: -webkit-box;
display: -moz-box;
width:800px;
height: 200px;
border: 1px solid #ccc;
-webkit-box-pack:center;
-moz-box-pack:center;
-webkit-box-align:center;
-moz-box-align:center;
}
#div1{
background: orange;
}
#div2{
background: yellow;
}
#div3{
background: green;
}
</style>
</head>
<body>
<div id="container">
<div id="div1">列1</div>
<div id="div2">列2</div>
<div id="div3">列3</div>
</div>
</body>

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论