未知尺寸图片在已知尺寸容器下的水平垂直居中
在一个固定大小的180*130的容器里面让图片显示,并做到垂直水平都居中,且图片大小随机。
下面是代码:
<div class="group_pic_list_block">
<div class="img"><a href="#"><img src="example1.png" /></a></div>
<p>sheena-小素博客sheena-小素博客sheena-小素博客sheena-小素博客sheena-小素博客</p>
<a href="#" class="img_del"></a>
</div>
<div class="group_pic_list_block">
<div class="img"><a href="#"><img src="example2.png" /></a></div>
<p>sheena-小素博客sheena-小素博客sheena-小素博客sheena-小素博客sheena-小素博客</p>
</div>
</div>
下面是样式:
</div>
下面是样式:
.group_pic_list_block{width:180px;padding:0 7px;float:left;margin-top:20px;position:relative;}
.img_del{display:block;width:25px;height:25px;position:absolute;right:7px;top:0; background:url(img-list-del.png) no-repeat;}
.img{background:#c8c8c8;width:180px;height:130px;margin-bottom:10px;text-align:center; display: table-cell;vertical-align:middle;*display: block;*font-family: Arail;*font-size:113.49px;}
.img img{vertical-align:middle;}
p{width:168px;height:58px;overflow:hidden;border:1px solid #ebebeb;padding:3px 5px;line-height:20px;margin-top:13px;}
以上代码是可以实现上述效果的,这里要特别说明一下标注为绿色的一段代码。
display: table-cell;vertical-align:middle;*display: block;*font-family: Arail;*font-size:113.49px;
垂直水平居中---标准浏览器:
display:table-cell;
text-align:center;
vertical-align:middle;
就可以做到垂直水平居中;
垂直水平居中--- ie6和ie7:
*display: block; /
*font-family: Arail; / 防止非utf-8引起的hack失效问题,如gbk编码
*font-size:113.49px; / 约为高度的0.873,130*0.873 约为113.49px
就可以兼容了。
以上代码是可以实现上述效果的,这里要特别说明一下标注为绿色的一段代码。
display: table-cell;vertical-align:middle;*display: block;*font-family: Arail;*font-size:113.49px;
垂直水平居中---标准浏览器:
display:table-cell;
text-align:center;
vertical-align:middle;
就可以做到垂直水平居中;
垂直水平居中--- ie6和ie7:
*display: block; /
*font-family: Arail; / 防止非utf-8引起的hack失效问题,如gbk编码
*font-size:113.49px; / 约为高度的0.873,130*0.873 约为113.49px
就可以兼容了。