天天看點
傳回

圖檔垂直居中的方法

方法：

.box {

 display: table-cell;

 vertical-align:middle;

 text-align:center;

 *display: block;

 *font-size: 175px;

 *font-family:Arial;

 width:200px;

 height:200px;

 border: 1px solid #eee;

}

.box img {

 vertical-align:middle;

}

<div class="box">

 <img src="http://pics.taobao.com/bao/album/promotion/

taoscars_180x95_071112_sr.jpg" />

</div>

本人的測試方法：

<style type="text/css">

html{margin: 0;padding: 0;}

.box{width:500px;height:400px;display:table;}

.box span{display:table-cell;vertical-align:middle;}

.img{margin: 0;padding: 0;}

.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0;} 

.clearfloat{zoom:1;} 

.fl{float: left;}

.fr{float: right;}

.bigboxdv{background-color: #ecedf1; padding: 10px 0;border-bottom: 1px solid red;}

.img-tui{width: 50px;height: 80px; vertical-align:middle;}

.img-tel{width: 80px; height: 80px;}

.img-ren{width: 80px; height: 80px;}

.dvbox1{width: 30%;height: 200px;}

.dvbox2{width: 40%;padding-top: 50px;}

.dvbox3{width: 30%;height: 200px;}

.zwen{text-align: center;display: block;font-size: 40px;}

</style>

<body>

<div class="bigboxdv clearfloat">

<div class="fl dvbox1 box">

<span>

<img class="img-tui" src="img/ind1_03.png" />

</span>

</div>

<div class="fl dvbox2">

<span class="zwen zhongname">王小二</span>

<span class="zwen zhongzaixian">線上</span>

</div>

<div class="fl dvbox3 clearfloat box">

<span>

<img class="img-ren fr" src="img/ind1_07.png" />

<img class="img-tel fr" src="img/ind1_05.png" />

</span>

</div>

</div>

</body>

css html 圖檔 垂直居中
上一篇: css居中的幾種方法_CSS讓子盒子居中的n種方法
下一篇: 利用css實作圖檔居中的8中方法

繼續閱讀