怎么计算手机不同分辨率下图片居中显示

outluo 2014-06-25 04:40:49 




<!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>无标题文1档</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;

}

.plr10{

	padding:0 10px

}

.jd_ul{

	padding:0 10px;

	float:left;

	text-align:center;

	}

.jd_li {

	max-width: 97px;

	max-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;

}

.jd_li img {

	width: 95px;

	height: 71px;

}

</style>

   

<body>

<div class="" style="text-align:center;">



   <ul class="jd_ul">

     <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>

     <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>


请问下 不同分辨率下下li怎么居中显示

在三星手机大分辨率下 如图

请问下 这种问题应该怎么解决啊
...全文
143 8 打赏 收藏 转发到动态 举报
写回复
用AI写文章
8 条回复
切换为时间正序
请发表友善的回复…
发表回复
hellNo 2014-06-27
  • 打赏
  • 举报
 回复
让各种机型适配你可以把宽度改成百分比，比如 width: 50%
hellNo 2014-06-27
  • 打赏
  • 举报
 回复
没用手机测，太宽啦。。 width: 720px; 改成300px 试试
hellNo 2014-06-27
  • 打赏
  • 举报
 回复
在CSS里加 .center { margin-left:auto; margin-right:auto; width: 720px; padding-top:5px; height:auto; } 把<div class="" style="text-align:center;"> 改成 <div class="center"> 试试
outluo 2014-06-26
  • 打赏
  • 举报
 回复
引用 4 楼 imtns59521 的回复:
下班回家啦，给你留个名，明天早上我来帮你整一整



在大的分辨率下 会出现像左偏移的情况 就是想问下有什么方法能居中显示
hellNo 2014-06-25
  • 打赏
  • 举报
 回复
下班回家啦，给你留个名，明天早上我来帮你整一整
outluo 2014-06-25
  • 打赏
  • 举报
 回复
引用 2 楼 qq_16878151 的回复:
宽度设置百分比 居中
已经试过了 不行
qq_16878151 2014-06-25
  • 打赏
  • 举报
 回复
宽度设置百分比 居中
outluo 2014-06-25
  • 打赏
  • 举报
 回复
没有人遇到过吗？？？
EMlog博客古典大气、响应式模板 v1.3
11、手机分辨率下添加了logo的荡秋千动画，原来logo是静态的，很无趣。 12、给网站统计处添加了解码特效和最新动态，同时背景图片增加了4张可供个人选择，具体看模版扩展素材页面。 13、给侧边栏“搜索框”添加了...
如何让图片自适应不同屏幕宽度，并居中显示。
这种图片都是在不同分辨率下都是显示图片的中间部分，这里我们介绍两种方式，第一种就是常见的方式，用定位我简单定义为三部曲： - 让包裹图片的盒子绝对定位， - left:50%, - Margin-left：图片宽度的一半 ...
html绝对定位自适应不同分辨率,(css)绝对定位如何在不同分辨率下的电脑正常显示位置？...
关于网友提出的“ (css)绝对定位如何在不同分辨率下的电脑正常显示位置？”问题疑问，本网通过在网上对“ (css)绝对定位如何在不同分辨率下的电脑正常显示位置？”有关的相关答案进行了整理，供用户进行参考，详细...
html中怎么适应不同分辨率的显示器（如电脑和手机）
通过设置定长定宽 通过设置定长定宽，都精确到px，整体居中，然后两边留白，在不同分辨率的显示器上显示效果一样的，只是两边的空白间距不一样。二.使用百分比宽度（自适应布局） 通过设置百分比长宽，对于不同...
Webview--如何让加载进来的页面自适应手机屏幕分辨率居中显示
让Webview加载的页面居中显示有我知道的俩种方法 第一种： [java] view plain copy print? WebSettings settings = webView.getSettings(); settings.setLayoutAlgorithm(LayoutAlgorithm....
JavaScript

87,904

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章