当前位置：首页 → 问答吧 → 垂直居中的产品列表

垂直居中的产品列表

时间：2010-09-17

来源：互联网

会的同志们帮帮忙啦，鼓捣了半天了
我要的效果
http://static7.photo.sina.com.cn/middle/5eaace5fg9070a10e4fb6&690
结果只写出了
http://static3.photo.sina.com.cn/middle/5eaace5fg9070a0f41882&690
左右没有margin的边距，底下也没有加文字的地方

复制内容到剪贴板

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
/*按比例生成缩略图*/
function DrawImage(MyPic, W, H) {
      var flag = false;
      var image = new Image();
      image.src = MyPic.src;

      if (image.width > 0 && image.height > 0) {
         flag = true;
         if (image.width / image.height >= W / H) {
            if (image.width > W) {
                  MyPic.width = W;
                  MyPic.height = (image.height * W) / image.width;
            }
            else {
                  MyPic.width = image.width;
                  MyPic.height = image.height;
            }
         }
         else {
            if (image.height > H) {
                  MyPic.height = H;
                  MyPic.width = (image.width * H) / image.height;
            }
            else {
                  MyPic.width = image.width;
                  MyPic.height = image.height;
            }
         }
      }
}
</script>
<style>
*{ margin:0; padding:0; font-size:12px;}
ul, li,ol { list-style:none; margin:0; padding:0; }
img{ border:0px;}
ul li{ display:table-cell; width:134px; height:106px; border:1px solid #ccc; vertical-align:middle; line-height:104px; text-align:center;}
ul li a{width:134px; height:106px;}
ul li img{ vertical-align:middle; border:0px;}
ul li span {display:inline-block; }
td{ width:134px; height:106px; border:1px solid #ccc; vertical-align:middle; line-height:104px; text-align:center;}
ol li{display:table-cell; width:134px; height:24px;vertical-align:middle; line-height:24px; text-align:center;}
</style>
</head>
<body>
<ul class="box">
<li><a href="#"><img src="http://www.han90.com/UploadFiles/2010-08/lhn/20108268858165609.jpg" onload="DrawImage(this,132,104)"/></a><span></span></li>
<li><a href="#"><img src="http://www.0163.org/uploads/allimg/100831/013ARO6-3.jpg" onload="DrawImage(this,132,104)"/></a><span></span></li>
<li><a href="#"><img src="http://pic.dc.yesky.com/imagelist/09/26/10807277_7764.jpg" onload="DrawImage(this,132,104)"/></a><span></span></li>
<li><a href="#"><img src="http://www2.xiangshu.com/UploadFiles/Day_090914/409_399613_60244101b20207c.jpg" onload="DrawImage(this,132,104)"/></a><span></span></li>
<li><a href="#"><img src="http://m.55show.com/uploads/day_20090824/20090824_317035f1a230d4a7082b69889cYCkFOS.jpg" onload="DrawImage(this,132,104)"/></a><span></span></li>
<li><a href="#"><img src="http://image163.poco.cn/mypoco/myphoto/20100721/22/4227601420100721222629030.jpg" onload="DrawImage(this,132,104)"/></a><span></span></li>
<li><a href="#"><img src="http://img.sheya.net/bbs/201009/01/030339swp1zk03sbbslkb3.jpg" onload="DrawImage(this,132,104)"/></a><span></span></li>
</ul>
<ol>
<li><a href="#">客观上的解放路</a></li>
<li><a href="#">客观上的解放路</a></li>
<li><a href="#">客观上的解放路</a></li>
<li><a href="#">客观上的解放路</a></li>
<li><a href="#">客观上的解放路</a></li>
<li><a href="#">客观上的解放路</a></li>
<li><a href="#">客观上的解放路</a></li>
</ol>
</body>
</html>

[ 本帖最后由 dxtomboy 于 2010-9-17 16:50 编辑 ]

作者: dxtomboy 发布时间: 2010-09-17

http://11284.site.booen.com/Product.php

自己到找相关代码·jQuery的·自己写的·需要注意的是IMG父元素A必须是block，而且有明确的高度和宽度

HTML代码：

<ul class="ProductList"> <li class="iHover"> <span class="pic"><a href="#" target="_blank" title="标题标题标题标题标题"><img src="http://1720.site.booen.com/getAccessory.php?accessoryId=12399&width=129&height=128" class="_ImagesReSize" alt="标题标题标题标题标题" /></a></span> <span class="title"><a href="#" target="_blank" title="标题标题标题标题标题">标题标题标题标题标题</a></span> </li> </ul>
提示：您可以先修改部分代码再运行

Css：

.ProductList li { float:left; display:inline; margin: 0 10px 10px 0; } .ProductList li.last { margin: 0 0 10px 0; } .ProductList li span.pic { display:block; width:129px; height:128px; padding:5px; border:1px solid #C1C1C1; background:url(../images/ProductListBg.gif) no-repeat; overflow:hidden; } .ProductList li.iShow span.pic { border-color:#999; } .ProductList li span.pic a { display:block; width:129px; height:128px; text-align:center; overflow:hidden; } .ProductList li span.title { display:block; width:141px; height:35px; line-height:35px; text-align:center; overflow:hidden; }
提示：您可以先修改部分代码再运行

js代码：

js调用代码,放在页尾即可：

[ 本帖最后由 heavensn 于 2010-9-18 17:28 编辑 ]

作者: heavensn 发布时间: 2010-09-18