<!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>
<title>Untitled Page</title>
<link href="s_common.css" type="text/css" rel="Stylesheet" />
<script type="text/javascript" src="jquery-1.4.2.min.js"> </script>
<style type="text/css">
.k_img_ul{ float:left; width:320px; padding:18px 0 0 0; }/*通过这个ul来控制这个部分与外部的距离*/
.k_img_ul li{ float:left; width:57px; padding:0 5px; text-align:center;}
.k_img_ul li span{ width:53px; height:53px; padding:2px; display:block; border:1px solid #ccc; }/*如果不带边框可以不要这个span*/
.k_img_ul li span a{ display:block;
width:53px; height:53px; overflow:hidden;
}/*重点是红色部分*/
/*.k_img_ul li span a img{ width:53px;}*/
/*一般图片只设宽度*//*当需要使长长于53,而宽小于53的图片垂直居中时把这一句注释掉*/
.k_img_ul p{ height:24px; line-height:24px;}
</style>
</head>
<body>
<ul class="k_img_ul">
<li><span><a href="#"><img src="5.jpg" /></a></span><p>king</p></li>
<li><span><a href="#"><img src="QQ截图未命名.jpg" /></a></span><p>king</p></li>
<li><span><a href="#"><img src="1.jpg" /></a></span><p>king</p></li>
<li><span><a href="#"><img src="5.jpg" /></a></span><p>king</p></li>
<br class="clear" />
</ul>
</body>
</html>
效果图如下：
<script type="text/javascript">
$(document).ready(function(){
//函数传入参数为img元素，和对于图片宽高的要求，这里是宽高一致的情况
function makeMid(classNmae,widthAndHeight){
var h=classNmae.height();//24
var w=classNmae.width();//508
// alert(h+"h"+w+"w");
if((h<widthAndHeight)&&(w>widthAndHeight))//当高度小于53而宽度大于53
时
{
// var x=(widthAndHeight*h)/w;
// alert(x);//2.5
var
marginT=Math.round(widthAndHeight/2-h/2);
// alert(marginT);
marginT=(marginT)+"px 0 0 0";
classNmae.css({width:widthAndHeight,height:h,margin:marginT});//设置图片元素的
CSS,宽为53,高为图片原来的高，margin为(53/2-图片原高度/2)
}
}
window.onload=function(){
///
alert("img:"+$("#k_img_ul>li>span>a>img").length);
var
count=$("#k_img_ul>li>span>a>img").length;//找到要检测的图片个数
// for(var i=0;i<count;i++)//这个for循环没有必要，each就是循环
// {
alert(i);
$("#k_img_ul>li>span>a>img").each
(function(){
makeMid($(this),Number(53));
});
// }
}
});
当加入这段jquery后，效果如下：
***************************************************无需边框版******************************************************
<!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>
<title>Untitled Page</title>
<link href="s_common.css" type="text/css" rel="Stylesheet" />
<style type="text/css">
.k_img_ul{ float:left; width:320px; padding:18px 0 0 0; }
.k_img_ul li{ float:left; width:57px; padding:0 5px; text-align:center;}
.k_img_ul li a{ display:block; width:53px; height:53px; overflow:hidden; }
.k_img_ul li a img{ width:53px;}
.k_img_ul p{ height:24px; line-height:24px;}
</style>
</head>
<body>
<ul class="k_img_ul">
<li><a href="#"><img src="5.jpg" /></a><p>king</p></li>
<li><a href="#"><img src="QQ截图未命名.jpg" /></a><p>king</p></li>
<li><a href="#"><img src="1.jpg" /></a><p>king</p></li>
<li><a href="#"><img src="5.jpg" /></a><p>king</p></li>
<br class="clear" />
</ul>
</body>
</html>
效果图如下：
