经常用的图片在容器中的水平垂直居中实例
2018-10-15 18:02
这是一个未知大小的图片在一个已知大小容器中的水平和垂直居中的例子，原文标题:“Centeringanimageofunknownsizeinanoutercontainerofknownsize”。
这个水平和垂直居中的例子能正常工作在IE5.x,IE6,IE7,Firefox,Opera,Mozilla,Netscape，为IE和非IE分别写了二套简单的样式。
IE使用inline-blocks，非IE使用table-cellandvertical-align。
CSS代码：
以下是引用片段：
/*fornon-IEbrowsers*/
div.holder{width:750px;height:300px;background:#f8f8f8;
border:1pxsolid#777;text-align:center;display:table-cell;vertical-align:middle;}
}
<!--[ifIE]>
<styletype=text/css>
/*verticalalignforIE*/
#edge{width:0;height:100%;display:inline-block;vertical-align:middle;}
#container{text-align:center;width:100%;display:inline-block;vertical-align:middle;}
</style>
<![endif]-->
xhtml代码：
<divclass=holder>
<spanid=edge></span>
<spanid=container><imgsrc=graphics/homework.jpgalt=/></span>
</div>
作者的例子是单个的，我扩展了下，一页6张图片，可适用于像册和产品展示等地方，查看演示
form:
文章标题：经常用的图片在容器中的水平垂直居中实例
文章链接：http://soscw.com/index.php/essay/18982.html