css3设置box-pack和box-align让div里面的元素垂直居中_ Div+Css教程-查字典教程网
css3设置box-pack和box-align让div里面的元素垂直居中
css3设置box-pack和box-align让div里面的元素垂直居中
发布时间:2016-12-27 来源:查字典编辑
摘要:以前处理垂直居中用的方法是设置div的height和line-height是一样的值,现在就不用那么麻烦了。只要设置元素的box-pack和...

以前处理垂直居中用的方法是设置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>

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新 Div+Css教程学习
    热门 Div+Css教程学习
    网页设计子分类