经常用的图片在容器中的水平垂直居中实例_javascript技巧

来源：懂视网责编：小采时间：2020-11-27 20:37:18

经常用的图片在容器中的水平垂直居中实例_javascript技巧

经常用的图片在容器中的水平垂直居中实例_javascript技巧:这是一个未知大小的图片在一个已知大小容器中的水平和垂直居中的例子，原文标题:Centering an image of unknown size in an outer container of known size。这个水平和垂直居中的例子能正常工作在IE5.x, IE6, IE7, Firefox,

推荐度：

点击下载本文 文档为doc格式

导读经常用的图片在容器中的水平垂直居中实例_javascript技巧:这是一个未知大小的图片在一个已知大小容器中的水平和垂直居中的例子，原文标题:Centering an image of unknown size in an outer container of known size。这个水平和垂直居中的例子能正常工作在IE5.x, IE6, IE7, Firefox,

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

以下是引用片段：
/* for non-IE browsers */
div.holder {width:750px; height:300px; background:#f8f8f8;
border:1px solid #777; text-align:center; display:table-cell; vertical-align:middle;}
}

　　xhtml代码：