这是一个未知大小的图片在一个已知大小容器中的水平和垂直居中的例子,原文标题:“Centering an image of unknown size in an outer container of known size”。
这个水平和垂直居中的例子能正常工作在IE5.x, IE6, IE7, Firefox, Opera, Mozilla, Netscape,为IE和非IE分别写了二套简单的样式。
IE使用inline-blocks,非IE使用table-cell and vertical-align。
CSS代码:
以下是引用片段:
/*fornon-IEbrowsers*/
div.holder{width:750px;height:300px;background:#f8f8f8;
border:1pxsolid#777;text-align:center;display:table-cell;vertical-align:middle;}
}
xhtml代码: