如何才能让多张图片在手机不同分辨率下居中显示
怎么才能让多张图片在手机不同分辨率下居中显示
------解决方案--------------------
<!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 name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
-webkit-user-select: none;
-webkit-user-drag: none;
-webkit-text-size-adjust: 100%;
}
a{
text-decoration: none;
}
a,input,button,textarea,fieldset,ul,span{
-webkit-tap-highlight-color: rgba(255,255,255,0);
}
input[type='text'] ,textarea ,fieldset{
border: none;
outline: none;
}
body,h1,h2,h3,h4,h5,h6,p,form,ul,ol,li,dt,dl,dd,th,td,label,bottom,input,textarea{ margin:0;padding:0;}
body{font:12px/1.5 arial,Tahoma; text-align:left;background:#FFF;color:#333;}
fieldset,img{border:0;}
ul{margin:0;padding:0;list-style:none;}
div,th,td{font-size:12px;}
.clearfix:after{ content:"\20"; display:block; clear:both; height:0}
.clearfix:after{ *zoom:1}
.clear{}
a{ color:#555; cursor:pointer; text-decoration:none;}
body{
font-family:Arial,"Lucida Grande",Verdana,"Microsoft YaHei",hei;
background:#f4f4f4;
}
.container_fixed{
width:320px;
margin:0 auto;
}
.container_fluid{
}
.plr10{
padding:0 10px
}
.jd_li {
height: 95px;
float: left;
display:inline;
background: #fff;
margin-right: 3px;
margin-bottom: 3px;
}
.jd-c p {
line-height: 14px;
height: 14px;
text-align: center;
width: 93px;
overflow: hidden;
}
</style>
<body>
<div class="" style="text-align:center;">
<ul class="clearfix plr10">
<li class="jd_li">
<div class=""><img width="90" height="54" src="http://pkgpic.ctrip.com/images2/174/821/821_46_S43272.JPG" /></div>
<div class="jd-c"><div class=""><p>鼓浪屿</p></div></div>
</li>
<li class="jd_li">
<div class=""><img width="90" height="54" src="http://pkgpic.ctrip.com/images2/174/821/821_46_S43272.JPG" /></div>
<div class="jd-c"><div class=""><p>鼓浪屿</p></div></div>
</li>
<li class="jd_li">
<div class=""><img width="90" height="54" src="http://pkgpic.ctrip.com/images2/174/821/821_46_S43272.JPG" /></div>
<div class="jd-c"><div class=""><p>鼓浪屿</p></div></div>
</li>
<li class="jd_li">
<div class=""><img width="90" height="54" src="http://pkgpic.ctrip.com/images2/174/821/821_46_S43272.JPG" /></div>
<div class="jd-c"><div class=""><p>鼓浪屿</p></div></div>
</li>
<li class="jd_li">
<div class=""><img width="90" height="54" src="http://pkgpic.ctrip.com/images2/174/821/821_46_S43272.JPG" /></div>
<div class="jd-c"><div class=""><p>鼓浪屿</p></div></div>
</li>
<li class="jd_li">
<div class=""><img width="90" height="54" src="http://pkgpic.ctrip.com/images2/174/821/821_46_S43272.JPG" /></div>
<div class="jd-c"><div class=""><p>鼓浪屿</p></div></div>
</li>
</ul>
</div>
</body>
</html>
------解决方案--------------------
<!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 name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{
margin: 0;