兼容各浏览器的图片垂直水平居中效果

返回首页
创建时间：二月 24th, 2008修改时间：二月 26th, 2008 Traffic(767)

最近有很多朋友都在问我：“有没有兼容IE和FireFox的图片垂直居中的方法？”。接到问题后我也查阅了网上的相关资料，虽然很多，但总是会出现这样或那样的问题。如：IE和FireFox不兼容，图片大小不确定就不好用等等。所以我决定自己写一个JavaScript的方法来解决这些问题。

首先，使用此方法的先决条件是：图片显示区域的宽、高必须已知，承载各图片对象的总体父对象的ID必须已知，而且需要按原比例缩放图片，使图片不失真。

可用区域的宽高：<div class="item"><img src="..." alt="..." /></div>，如果设置了“item”的宽为80px，高为100px，那么可用区域就是宽为80px，高为100px。如果设置了padding:4px;border:1px #CCC solid，那么增大的只是实际占用的区域，而可用区域还是原来的值不变。

承载各图片对象的总体父对象：<div id="main"> <div class="item"><img ... /></div> ... <div class="item"><img ... /></div> </div>，此时，“main”就是总体父对象的ID。

下面用一个实例来介绍此方法的应用。请看下面的代码：

下面详细介绍一下各主要部分的作用。

一、XHTML + CSS部分

1、父对象：

<div id="main"> <div class="item"><img src="..." alt="..." /></div> ... <div class="item"><img src="..." alt="..." /></div> </div>，“<div id="main">”就是各图片对象的总体父对象。

2、子对象：

<div class="item"><img src="48X48.gif" alt="48 X 48" /></div>，“<div class="item">”就是承载图片对象的子对象。

重点说明CSS中的两个属性：“display:inline;”和“text-align:center;”。因为各子对象都设置了“float:left; margin-left:10px;”，如果不设置“display:inline”的话在IE6下面就会出现双倍边距的Bug，设置此属性就可以有效地解决这个问题。（请参阅IE双倍边距BUG的现象及解决办法）

“text-align:center”设置了子对象中的内容水平居中于此对象。

“width:80px; height:100px;”设置了子对象可用区域的范围。宽80像素，高100像素。

二、JavaScript部分

1、方法的原理：

（1）整体思路：取得父对象下所有Img对象的集合，分别将各子对象中的图片按照比例缩小在子对象可用范围内。

（2）垂直居中原理：首先取得图片的高度，居中 = （子对象可用区域的高度 - 图片的高度） / 2。

（3）需要考虑的几种情况：以子对象的可用区域高大于宽为例：

第一种，图片的宽和高均小于可用区域。此时，只需要设置图片居中于子对象即可。

无论是图片的宽或高，只要任何一个超过了可用区域的范围时，判断图片的宽高比：

第二种，图片的宽比高大。此时，应该将图片的宽设置为子对象可用区域的宽，再按比例缩小高度。（因为，如果想等比例缩小到一定的范围，就应该先缩小最大的一条边，然后按照比例再缩小另外一条。）如果等比例缩小后的高度仍然比子对象可用区域的高大，将缩小后的高度再缩至和可用区域的高相同，按照同样的方法再等比例缩小宽度。最后使图片垂直居中于子对象。

第三种，图片的宽比高小。此时，应该将图片的高设置为子对象可用区域的高，再按比例缩小宽度。如果等比例缩小后的宽度仍然比子对象的可用区域的宽大，将缩小后的宽度再缩至和可用区域的宽相同，按照同样的方法再等比例缩小高度。最后使图片垂直居中于子对象。

第四种，图片的宽和高相同，并且都超出了子对象的可用范围。此时，只需要设置图片的宽和高为子对象可用区域最小的边的大小即可。如果子对象可用区域的高大于宽，则还要设置垂直居中。

第五种，图片的宽和高正好等于子对象可用的宽和高。这时是最幸福的了，什么也不用做。

2、方法的调用：

“<script type="text/javascript" language="javascript">setScope("main",80,100);</script>”。

三个参数分别为：父对象的ID名称，子对象可用区域的宽，子对象可用区域的高。

3、主要代码说明：

var mainObj = document.getElementById(obj);： //obj是作为参数传递进来的，是父对象的ID名称。“document.getElementById(obj)”，取得某个对象，包括其属性和方法。

var subObj = mainObj.getElementsByTagName("img");： //取得父对象下所有HTML标签为“img”的子对象。“subObj”是一个集合，包含所有父对象下的“img”子对象。“subObj.length”取得集合中子对象的数量，应用时写法为：“subObj[i]”（i以0开始）。如果分别设置，需要用到循环。

“divW = subObj[i].width;”和“divH = subObj[i].height;”： //设置各图片对象的宽和高。（注意：在设置高度和宽度时一定要在后面加上“px”，不加上在FireFox下视为无效的属性值，不起作用。）

“setW / H”为子对象的可用区域宽和高的比例，“divW / H”为图片宽和高的比例，要是图片的比例和可用区域的相同，则先要确定图片的一个边（即上面几种情况确定），在按照：setW / setH = divW / divH的公式进行等比例计算。如：setW：80 / setH：100 = divW / divH：150，则divW = setW：80 * divH：150 / setH：100，则等比例缩小图片后的宽度为120。

“parseInt(divW)”： //parseInt的作用是将字符串、非整数的参数转换为整数形式。

到这里，此方法的思路和主要部分的功能就全部介绍完了。下面再介绍几种使图片垂直居中的其他方法和利弊。

1、不设置承载图片的对象的宽和高，只设置padding（边框距内容之间的距离）。

优点：比较简单实用。缺点：由于对象自适应图片的大小，使对象的大小不确定，会造成页面混乱。

2、设置承载图片的对象的CSS属性为“display:table;”（强制将DIV转换为Table）。

优点：简单实用。缺点：IE下不起作用。

3、设置承载图片的对象的“position:relative;”，设置图片的“position:absolute;”，先将图片的上边距下移50%高度，在向上移动一半高度的50%（如果对象的高度为100px，则先将图片移动到距离上边50px的位置，再向上移动25px，最终图片距离顶边的距离是25px）。

优点：只需要设置CSS就可以，比较简单。缺点：各浏览器的兼容性比较差，而且，有时如果图片的大小不确定时还会出现一想不到的问题。

解决任何问题从来都不是只有一种方法，要学会从中选取最有效、最简便的方法才是最好的选择。随着Web2.0时代的到来、随着XHTML+CSS越来越深入人心、企业对人才的需求，我建议广大网页设计们能够更多的掌握JavaScript技术，这样才能设计出更好的作品。

文字垂直居中请参阅《文字垂直居中》一文。

Posted by: 郁闷
相关话题：

Comments(4)

这正是我想要的，一下全解决了，不用在后台程序里写图片的缩放了。哈哈！谢谢郁闷兄！

二月 25th, 2008Posted by: 郁闷too25designer#163.com

先顶一下，支持开源！
建议把JS独立做一个专题，像你的模板专题一样，方便我们下载使用。

二月 25th, 2008Posted by: script26aiguozhe#tom.com

非常有效的方法,特别是在图片大小未知的情况下对图片进行最大宽和高的设置.
标题应该改一下,加上"CSS,图片自适应"这样的关键字,要不在百度里搜不到的~~
这么好的文章就埋没了~~

有一点点建议,是否可以给水平和垂直居中加个开关参数,有时候不需要居中的时候也很头痛~~~呵呵

三月 10th, 2008Posted by: gelan27gelaninwind#163.com

比如这里,正文里图片上方的一大片空白,是因为垂直居中的原因吧~

http://student.zhyww.cn/u/1/index.html

三月 10th, 2008Posted by: gelan28gelaninwind#163.com
User Name:
（必添）
User Email:
（必添）
User URL:
Comment:
（必添）