标签：orm display logs form otto center div keyword block
行内元素的水平居中
1.div{text-align:center} /*DIV内的行内元素均会水平居中*/
行内元素的垂直居中
1.单行文本：div{height:30px; line-height:30px} /*DIV内的行内元素均会垂直居中*/
2.多行文本：
<div class="box"> <span>多行文本</span> </div>
1 .box{ 2 display: table-cell; 3 width: 200px; 4 height: 600px; 5 border:1px solid #3c3c3c; 6 vertical-align: middle; 7 } 8 .box>span{ 9 display: inline-block; 10 vertical-align: middle; 11 }
3.图片水平垂直居中
1 <div class="box"> 2 <img style="" src="http://n1.itc.cn/img7/adapt/wb/sohulife/2016/12/19/148210538955786000_720_1000.JPEG" alt=""> 3 </div>
.box{ width: 200px; height: 600px; border:1px solid #3c3c3c; display: table-cell; vertical-align: middle; text-align: center; } .box>img{ width: 180px; }
.box{ width: 200px; height: 600px; border:1px solid #3c3c3c; position: relative; } .box>img{ position: absolute; top:0; bottom: 0; left:0; right:0; width: 180px; margin: auto; }
.box{ width: 200px; height: 600px; border:1px solid #3c3c3c; position: relative; } .box>img{ position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); width: 180px; }
多元素垂直居中对齐(元素之间)
<div class="box"> <div class="chunk">1223</div> <div class="chunk">5788</div> <img style="" src="http://n1.itc.cn/img7/adapt/wb/sohulife/2016/12/19/148210538955786000_720_1000.JPEG" alt=""> </div>
.box{ width: 200px; height: 600px; border:1px solid #3c3c3c; text-align: center; } .chunk{ background: red;width: 40px;height: 50px; display: inline-block; vertical-align: middle; } .box img{ width: 80px; display: inline-block; vertical-align: middle; }
标签：orm display logs form otto center div keyword block
原文地址：http://www.cnblogs.com/gaaraxt/p/6483429.html
