未知尺寸图片在已知尺寸容器下的水平垂直居中

在一个固定大小的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>

下面是样式:
.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 
就可以兼容了。
posted @ 2012-05-28 21:39  sheena的世界  阅读(305)  评论(0编辑  收藏  举报