这是一个未知大小的图片在一个已知大小容器中的水平和垂直居中的例子，原文标题:“Centeringanimageofunknownsizeinanoutercontainerofknownsize”。
这个水平和垂直居中的例子能正常工作在IE5.x,IE6,IE7,Firefox,Opera,Mozilla,Netscape，为IE和非IE分别写了二套简单的样式。
IE使用inline-blocks，非IE使用table-cellandvertical-align。
CSS代码：
以下是引用片段：
div.holder{width:750px;height:300px;background:#f8f8f8;
border:1pxsolid#777;text-align:center;display:table-cell;vertical-align:middle;}
}
<!--[ifIE]>
<styletype="text/css">
#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.jpg"alt=""/></span>
</div>
作者的例子是单个的，我扩展了下，一页6张图片，可适用于像册和产品展示等地方，查看演示
form:http://www.cssplay.co.uk/menu/centered.html
网站建设 IT知识 IT知识教程 经常用的图片在容器中的水平垂直居中实例 
最新文章
热门文章
猜你喜欢
