未知尺寸图片在已知尺寸容器下的水平垂直居中-优快云博客

本文介绍了一种在固定尺寸容器内使图片垂直水平居中的方法，并确保在不同浏览器（包括IE6和IE7）下都能正常显示。通过特定CSS技巧实现图片随机大小的同时保持良好的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在一个固定大小的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
就可以兼容了。

转载于:https://www.cnblogs.com/web-sheena/archive/2012/05/28/2522523.html