首页 > 下载 > 下载详文:Html图片列表上下左右居中(ul)

Html图片列表上下左右居中(ul)

发布时间:2014年08月07日 13时20分45秒   属性:程序Web开发 > Javascript/Html    访问次数:108087
字体: 初始 添加收藏 分享给好友

Html图片列表上下左右居中(ul)

在前台页面显示图片列表时,以前很多使用的是Table在td里面放入img标签,然后设定td的valign为middle(<td valign="middle">),这样便完成了图片的上下居中,左右居中所有标签CSS属性都有这个align设置为center即可。但所有做前端设计的都知道Table表格太多会影响页面加载速度。这里本文主要是通过ul标签来完成图片列表的上下左右居中对齐。

采用ul列表来做图片列表,我们知道ul中的li元素是没有vlign属性的,这样图片就无法完成上下居中,同时还需要自自动匹配图片的比例,那这里就必须加入javascript来完成这些显示效果。

先建立html页面,在<head>标签中加入css样式,设定ul的元素的样式属性,将ul的padding和margin都设定为0px,list-style设为none;接着ul li的float设置为left, margin边距为3px;li元素中还需要放入一个p标签,将p标签宽高设置为242个像素(这里图片显示是240个像素,加上图片边框两面各一个像素所以是242个像素),border设置为1个像素,text-align居中设置为center,同时也需要将p标签的padding和margin都设定为0px;接着在p标签中需要加入一个img标签,只需要给img标签加入一个边框。详细代码如下:

HTML 代码  复制
<head> <title></title> <style type="text/css"> ul { padding: 0px; margin: 0px; list-style: none; } ul li { float: left; margin: 3px; } ul li p { border: 1px solid #ccc; padding: 0px; margin: 0px; width: 242px; height: 242px; text-align: center; } ul li p img { border: 1px solid #eee; } </style> </head> <body> <ul> <li> <p> <img src="" /> </p> </li> <li> <p> <img src="" /> </p> </li> <div style="clear: both"> </div> </ul> </body>

效果如下:

接下来将里面的img图片标签加入图片,默认的图片加载进来可以看到无法按规则的上下左右居中匹配显示,如下图效果可以看到。

上面可以看到ul li元素中显示图片,这里需要匹配上下左右大小,就需要编写脚本来处理,在img图片的onload事件中处理图片的显示,这里需要将所有的im自动匹配宽高240个像素,横构图图片要宽240宽,竖构图图片要匹配240高,对于横幅构图的图片上下居中,那么就需要把图片匹配高240减去图片当前图片的实际高,然后再除以2,这样所得结果赋值给margin-top和margin-bottom就是上下居中的结果。而对于竖构图的图片,则只需要把高缩放到240像素即可。这里我们只需要判断一下,当图片的宽大于高的值,那么它就是横构图;高大于宽那么就是竖构图。javascript代码如下:

HTML 代码  复制
<script type="text/javascript"> //Copyright(C) 遗昕|Weisim3.com 08.07.2014 //Html图片列表上下左右居中(ul) //处理图片宽高缩放配img(图片id,设定宽高) function img(img, widthImg) { var imgLink = document.getElementById(img); if (imgLink.width > imgLink.height) { imgLink.width = widthImg; //imgLink.height imgLink.style.marginTop = (widthImg - imgLink.height) / 2 + "px"; imgLink.style.marginBottom = (widthImg - imgLink.height) / 2 + "px"; //alert(imgLink.height); } if (imgLink.width < imgLink.height) { imgLink.height = widthImg; } } </script>

最后在img标签中加入id,然后在每个img标签的onload中加入这个javascript脚本方法即可,实现最终的上下左右自动匹配对齐大小显示。

HTML 代码  复制
<ul> <li> <p> <img src="Thumbnail/05fe3.png" id="1" onload="img(this.id, 240)" /> </p> </li> <li> <p> <img src="Thumbnail/06df1.png" id="2" onload="img(this.id, 240)" /> </p> </li> <li> <p> <img src="Thumbnail/200547.png" id="3" onload="img(this.id, 240)" /> </p> </li> <li> <p> <img src="Thumbnail/20055.png" id="4" onload="img(this.id, 240)" /> </p> </li> <li> <p> <img src="Thumbnail/57bd3.png" id="5" onload="img(this.id, 240)" /> </p> </li> <li> <p> <img src="Thumbnail/5ebc1.png" id="6" onload="img(this.id, 240)" /> </p> </li> <li> <p> <img src="Thumbnail/69aad.png" id="7" onload="img(this.id, 240)" /> </p> </li> <li> <p> <img src="Thumbnail/881fa.png" id="8" onload="img(this.id, 240)" /> </p> </li> <li> <p> <img src="Thumbnail/below.png" id="9" onload="img(this.id, 240)" /> </p> </li> <li> <p> <img src="Thumbnail/untitled.png" id="10" onload="img(this.id, 240)" /> </p> </li> <div style="clear: both"> </div> </ul>

效果如下:

除此以外网络上还有其它介绍ul li图片上下左右居中显示图片的,采用纯css来实现,会遇到浏览网器兼容问题,没有本文提供的方案好使用,本文提供的方案能兼容任何浏览器通过javascript结合css来完成图片匹配显示的。

免费
Html图片列表上下左右居中(ul) (6)
本下载连接不支持第三下载工具打开,请直接点击下载即可
文章版权归属weisim3.com所有,未经书面版权许可同意,不得私自转载(或做修改转载),源文件示例仅供学习使用,更不要出于商业用途或印刷出版发行!否则将追究其相关法律责任,版权联系QQ:729260499。
遺昕 | Weisim3.com 下载许可条款 ( 您必须接受同意才可下载 ) .