css3设定box

2021-01-20 08:40 jianzhan
之前解决竖直垂直居中用的方式是设定div的height和line-height是1样的值,如今就无需那末不便了。要是设定元素的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>