网易

行情搜索:

图片在已知大小容器中的水平垂直居中实例

这是一个未知大小的图片在一个已知大小容器中的水平和垂直居中的例子,原文标题:“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代码:

作者的例子是单个的,我扩展了下,一页6张图片,可适用于像册和产品展示等地方.陈刚

网易科技,更多精彩在首页,
精彩推荐

今日网易科技看点


39健康网_中国第一健康门户网站
商业推荐

排行榜

今日网易财经看点


主编信箱 热线:020-85105316 给网易提意见 
About NetEase - 公司简介 - 联系方法 - 招聘信息 - 客户服务 - 相关法律 - 网络营销
网易公司版权所有
©1997-2008