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

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怎么居中显示

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

请问下 这种问题应该怎么解决啊
...全文
144 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
EMlog博客古典式模板 v1.3更新介绍 介绍：一款高端大气、古典优雅的主题，采用html5+css3响应式、智能化设计，兼容IE8、9、10、11和各种现代浏览器。在手机、平板、PC上都能完美显示。官网不断更新，有更多横幅、图标和视频教程提供您下载。 2014年9月25日 一、新增功能 1、给首页顶部横幅添加了淡入的动画效果，时间很短，不注意看不出来。给“返回顶部”按钮添加了从底部飞出来的效果。 2、导航菜单上添加了“文字随机解码特效”，兼容IE8+。同时在“手气不错”上加了一个提示效果：今日手气好，没事乱翻书。 3、侧边栏添加了“彩色标签”和“抖动的提示动画”。 4、日志页添加了“彩色标签”。有标签时显示，文章没有添加标签就显示“本文无需标签！” 5、日志页，“您的位置”和标题下添加了详细的“父子分类”，这样更能清楚的看到你的文章在那个分类中。 6、在发表评论框上添加了一个个性字体。 7、在侧边栏“日历”的当天日期位置上添加了旋转动画，这样静中有动，趣味性增加了，代表时间不停的旋转流逝……。 8、在网页底部的“返回顶部”文字上添加了滚动动画，以前是直接跳转到顶部。 9、点“评论分割线”可以送你到评论框处，省时省力。 10、添加了“没有上一篇咯！”和“没有下一篇咯！”的文字抖动提示动画，以前没有。 11、手机分辨率下添加了logo的荡秋千动画，原来logo是静态的，很无趣。 12、给网站统计处添加了解码特效和最新动态，同时背景图片增加了4张可供个人选择，具体看模版扩展素材页面。 13、给侧边栏“搜索框”添加了丘比龙的表情动画，增添搜索的趣味。 14、给发表评论处加了“返回顶部”的png箭头按钮，点一下即返回顶部。 15、给发表评论添加了按钮样式。 16、给评论头像添加了旋转动画。 17、给首页侧边栏的“最新评论”加了随机头像，这些头像都是英雄人物啊。 18、给日志页末尾处加了读者的阅读时间提示，珍惜时间，不要浪费在无谓的文章里。 19、给“日志页”和“自建页”的“文章标题”加了CSS3流光特效，华丽而引人注目，太棒了！ 20、给整个网站添加了一个“内链锚点平滑滚动”js插件，如果网页内容过长、过多，这个插件就体现除了强大的作用。 21、给日志页、自建页的标题添加了一根不同的线条，原来的太难看了。 22、给侧边栏添加了浮动跟随广告，有图片和文字样式。 二、修改地方 1、手机低分辨率的上一篇、下一篇按钮错位问题。 2、高分辨的上下篇蓝色按钮错位问题。 3、修正在IE浏览器下捐赠横幅按钮不能自适应的问题。 4、修改了侧边栏的“日历”、“友情链接”、“统计”都只在首页显示，日志页、自建页面都不显示。 5、修改了侧边栏搜索框的颜色和文字。 6、给最新文章添加了数字序列。 7、给版权信息的二维码加了“提示文字”效果。 8、微语页的站长名字加了解码特效，鼠标悬停或移动文字处，头像出现720度旋转动画效果。正文为16号字体、回复14号字体，这样看起来更舒服、更美观。 9、更换了侧边栏顶部的小图标，所有图标皆是精挑细选的。 10、更换了日志页的小图标。 11、整合了日志页的位置和日志信息为一体，让自建页的文章标题居中。 12、更改了日志页的文章发表时间为中文格式。2014年6月2日 3:00 星期一 13、更改了低分辨率下，标题、信息、摘要的行距细节问题。 14、侧边栏统计修改了。 三、模版素材扩展 1、添加了4张统计背景图片 2、顶部横幅添加了31张，V1.2是20张。 随机头像，以前是10张。 4、日志页添加了评论古典分割线。 5、日志页发表评论框中加了一个“水墨山水”的图片，这样看起来更美观。 二、修正地方 1、修正了底部“站长名字”的一个小BUG，以前在“自建页面”不显示名字，现在好了。 2、修正侧边栏最新留言的样式。 3、修正了日志页评论的样式。 4、一些图标的变化。 模板介绍 介绍：古典大气、响应式、智能化设计，兼容IE6-11和各种现代浏览器。在手机、平板、PC上都能完美显示。 支持EMlog版本：5.31 模板兼容：此模版兼容IE6、7、8、9和IE 内核的浏览器，并支持以下浏览器。 模版特色 一、响应式设计，兼容PC+手机。哪怕是在240×320的分辨率下效果也不错。 二、采用1200px宽度设计。抛弃N年前流行的960px设计，现在全球分辨率用的最多是1366、1440、1024、1920，所以我采用了前2种分辨率的中间宽度1200px，而1024下又是自适应宽度，所以不用担心1024。1200px阅读面积更宽，更大气。 三、纸质风格，良好阅读体验。博客正文默认采用16PX字体，阅读体验更加良好，字号有14px、16px、18px可供访客选择。背景为什么不用白色，白色黑字长久阅读会很累，白色是高光，反光度高，而
如何让图片自适应不同屏幕宽度，并居中显示。
我们在浏览网站的时候发现，很多网站的banner图片都是全屏宽度。这种图片都是在不同分辨率下都是显示图片的中间部分，这里我们介绍两种方式，第一种就是常见的方式，用定位我简单定义为三部曲： - 让包裹图片的盒子绝对定位， - left:50%, - Margin-left：图片宽度的一半 看例子吧：
html绝对定位自适应不同分辨率,(css)绝对定位如何在不同分辨率下的电脑正常显示位置？...
关于网友提出的“ (css)绝对定位如何在不同分辨率下的电脑正常显示位置？”问题疑问，本网通过在网上对“ (css)绝对定位如何在不同分辨率下的电脑正常显示位置？”有关的相关答案进行了整理，供用户进行参考，详细问题解答如下：问题： (css)绝对定位如何在不同分辨率下的电脑正常显示位置？ 描述:绝对定位的父级元素已经相对定位了，但是在不同分辨率的电脑下，绝对定位还是会错乱，大家有什么好的解决方法么...
html中怎么适应不同分辨率的显示器（如电脑和手机）
一.通过设置定长定宽     通过设置定长定宽，都精确到px，整体居中，然后两边留白，在不同分辨率的显示器上显示效果一样的，只是两边的空白间距不一样。二.使用百分比宽度（自适应布局）     通过设置百分比长宽，对于不同分辨率的显示器上会自动适应大小，很nice。三.使用css3的@media(响应式布局)     1280分辨率以上（大于1200px）@media screen and (min...
Webview--如何让加载进来的页面自适应手机屏幕分辨率居中显示
让Webview加载的页面居中显示有我知道的俩种方法 第一种： [java] view plain copy print? WebSettings settings = webView.getSettings();  settings.setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);   Layout
JavaScript

87,914

社区成员

224,617

社区内容

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

加载中

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

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

+ 用AI写文章