经常会遇到img垂直居中div的问题,下面我们来整理下
一.水平居中
1.text-align:center
.wrap1{
text-align: center;
width: 500px;
background-color: #000;
height: 100px;
}
.wrap1 img{
width: 100px;
height: 50px;
}
<div class="wrap1">
<img src="img-03.png">
</div>
2.margin: 0px auto;(要注意:把img变成块级元素)
.wrap1{
width: 500px;
background-color: #000;
height: 100px;
}
.wrap1 img{
width: 100px;
height: 50px;
margin: 0px auto;
display: block;
}
注意:a.这个图片的宽度有时候是不一定要设置,前提是浏览器自己能获取到图片的宽,否则需要我们自行定义个宽。
b.局部可以覆盖全局,局部写margin是会生效,不受body上的margin影响的。让一个区块居中显示:margin:0 auto;是对的,但ie6-8来看,依然是没用的,要另外写一句:text-align:center;
3.列表中使用text-align: center;li{display: inline;}
.wrap4{width: 500px;background-color: #000;height: 180px;}
.test4{text-align: center;padding: 15px;}
.test4 li{display: inline;}
.test4 a{padding: 2px 6px;color: #fff;border:1px solid #fff;}
<div class="wrap4">
<ul class="test4">
<li><a href="#">1</a></li>
</ul>
<ul class="test4">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
<ul class="test4">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
</ul>
</div>
4.position: relative; left:50%;margin-left:;相对定位绝对定位来做
二.垂直
1.display: table-cell; vertical-align: middle;
.wrap{
background-color: #000;
width: 500px;
color: #fff;
height: 100px;
display: table-cell;/*ie7和ie6都不能识别 display: table-cell;*/
vertical-align: middle;/*ie7和ie6能识别vertical-align:middle; */
*position: relative;
}
.vertical-wrap{*position: absolute; *top:50%;}
.vertical{*position: relative;*top: -50%;}
<div class="wrap">
<div class="vertical-wrap">
<div class="vertical">
<p>Hello wrold</p>
<p>Hello wrold</p>
</div>
</div>
</div>
注意:因为display: table-cell;不兼容ie7所以才要使用
.vertical-wrap{*position: absolute; *top:50%;}
.vertical{*position: relative;*top: -50%;}
如果在父级.wrap中加入“text-align: center;”则垂直居中。
a:图片也是可以
.wrap{
width: 200px;
color: #fff;
height: 200px;
display: table-cell;/*ie7和ie6都不能识别 display: table-cell;*/
vertical-align: middle;/*ie7和ie6能识别vertical-align:middle; */
*position: relative;
border:1px solid #ccc;
margin-left: 20px;
text-align: center;
}
.wrap .vertical-wrap{*position: absolute; *top:50%;}
.wrap .vertical{*position: relative;*top: -50%;}
.wrap img{width: 100px;height: 50px;}
<div class="wrap">
<div class="vertical-wrap">
<a class="vertical">
<img src="img-03.png"/>
</a>
</div>
</div>
但是在ie7中text-align: center;并不会使其图片居中。
b:如果延伸到列表中时,ie7以下不支持。
.m10 li{
width: 200px;
color: #fff;
height: 200px;
display: table-cell;/*ie7和ie6都不能识别 display: table-cell;*/
vertical-align: middle;/*ie7和ie6能识别vertical-align:middle; */
*position: relative;
text-align: center;
border:1px solid #ccc;
margin-left: 20px;
}
.m10 li .vertical-wrap{*position: absolute; *top:50%;}
.m10 li .vertical{*position: relative;*top: -50%;}
.m10 li img{width: 100px;height: 50px;}
<ul class="m10">
<li>
<div class="vertical-wrap">
<a class="vertical">
<img src="img-03.png"/>
</a>
</div>
</li>
<li>
<div class="vertical-wrap">
<a class="vertical">
<img src="img-03.png"/>
</a>
</div>
</li>
<li>
<div class="vertical-wrap">
<a class="vertical">
<img src="img-03.png"/>
</a>
</div>
</li>
</ul>
三.垂直居中
1.原理: 利用vertical-align实现垂直,决定行高的是行内最高的元素的值。
.m10 li{
float: left;
width: 200px;
height: 200px;
text-align: center;
border:1px solid #ccc;
}
.m10 li span{height: 100%;display: inline-block;vertical-align: middle;}
.m10 li img{width: 100px;height: 50px;vertical-align: middle;}
<ul class="m10">
<li>
<span></span>
<img src="img-03.png"/>
</li>
<li>
<span></span>
<img src="img-03.png"/>
</li>
<li>
<span></span>
<img src="img-03.png"/>
</li>
</ul>
ie7都是可以兼容的
很多方法都是依赖于将外部容器的显示模式设置成table才能实现垂直居中,也就是div来模拟table。
未知高度的图片在div设置垂直居中