<html>

    <head>

         <style type="text/css">

             .imgDiv {

                 overflow: hidden;

                 display:table;

                 border-spacing:10px;

                 position: absolute;

                 left: 50%;

                 top: 50%;

                 width: 900px;

                 height: 600px;

                 margin-left: -450px;

                 margin-top: -300px;

             }

             .imgDiv li {

                 width:900px;

                 height:600px;

                 text-align:center;

                 vertical-align:middle;

                 position:relative;

                 margin: 10px;

                 *float:left;

                 display: table-cell;

             }

             .imgDiv .imgDivs {

                 *position:absolute;

                 top:50%;

             }

             .imgDiv .imgDivs img {

                 *position:relative;

                 top:-50%;

                 left:-50%;

                 max-width:900px;

                 max-height:600px;

                 width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "900px": "auto" );

                 height:expression(document.body.clientHeight>document.getElementById("pic").scrollheight*9/10? "600px": "auto" );

             }

        </style>

    </head>

    <body>

        <div class="imgDiv">

            <li><div class="imgDivs"><img src="http://mat1.qq.com/www/images/allskin/wmlogo.gif" ></div></li>

        </div>

    </body>

</html>
max-width:900px;

max-height:600px;

width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "900px": "auto" );

height:expression(document.body.clientHeight>document.getElementById("pic").scrollheight*9/10? "600px": "auto" ); 

其中这几句是对于img大小的处理，如果img大小超出div容器的大小，会按照这个进行缩放显示，如果img没有超出div容器的大小，会正常显示，img原来多大，就显示多大

div中的img垂直居中的更多相关文章

  1. [转]如何让div中的内容垂直居中

    转自:http://blog.163.com/yan_1990/blog/static/197805107201211311515454/ 虽然Div布局已经基本上取代了表格布局,但表格布局和Div布 ...

  2. 如何让div中的内容垂直居中

    虽然Div布局已经基本上取代了表格布局,但表格布局和Div布局仍然各有千秋,互有长处.比如表格布局中的垂直居中就是Div布局的一大弱项,不过好在千变万化的CSS可以灵活运用,可以制作出准垂直居中效果, ...

  3. 文字在div中水平和垂直居中的的css样式

    文字在div中水平和垂直居中的的css样式 text-align:center; /*水平居中*/ line-height: 20px; /*行距设为与div高度一致*/ 示例如下: HTML元素 & ...

  4. div中的img垂直居中的方法，最简单！ 偷学来的，，，不要说我抄袭啊(*^__^*)

    让div中的img垂直居中,水平居中很简单,用text-align:center; 让div中img垂直居中的方法其实也很简单 重点是: display:table-cell;   让标签具有表格的属 ...

  5. div中让文字垂直居中

    在div中如何让文字垂直居中? 作者在刚接触web前端开发时就遇到了这个问题,一直没有记录下来,今天正好有空,便记录下来. 为了方便展示,我把style先直接写在了div里. 效果如下图所示: 图1. ...

  6. 如何让div中的span垂直居中 ----height:100%设置div的高度

    如果div中只有一个span一个元素,可以使用line-height.如果div中还有其他元素,可以设置span的css如下: .span{ position: absolute; top: 50%; ...

  7. div中的内容垂直居中的五种方法

    一.行高(line-height)法 如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:3 ...

  8. 使文字在div中水平和垂直居中的的css样式为，四个边分别设置阴影样式

    text-align:center; /*水平居中*/ line-height: 20px; /*行距设为与div高度一致*/ HTML元素 <div>水平垂直居中</div> ...

  9. CSS总结div中的内容垂直居中的五种方法

    一.行高(line-height)法 如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:3 ...

  10. 浮动div中的图片垂直居中

    table-cell方法垂直水平居中 <!DOCTYPE html> <html> <head> <meta name="description&q ...

随机推荐

  1. Android Activity 生命周期中onStart()和onResume()的区别

    首先了解Activity的四种状态 Running状态:一个新的Activity启动入栈后,它在屏幕最前端,处于栈的最顶端,此时它处于可见并可和用户交互的激活状态.Paused状态:当Activity ...

  2. js onchange事件

    因为onchange在属性值改变时还必须使得当前元素失去焦点(onblur)才可以激活该事件. 如果你需要即时监听输入框值的变化,建议使用 onpropertychange 事件! 在IE下,当一个H ...

  3. ZOJ-3380 Patchouli’s Spell Cards DP, 组合计数

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3380 题意:有m种不同的元素,每种元素都有n种不同的相位,现在假 ...

  4. HDU-4605 Magic Ball Game 树状数组+离散+dfs

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4605 题意:给一颗树,每个节点有个权值w[u],每个节点只有两个儿子或者没有儿子,从根节点放下一个小球 ...

  5. 使用slf4j取代Apache Commons Logging

    假如你正在开发应用程序所调用的组件当中已经使用了 JCL(之前叫 Jakarta Commons Logging,JCL) 的,还有一些组建可能直接调用了 java.util.logging,这时你需 ...

  6. Eclipse安装ADT插件

    安卓开发环境搭建,如果选择的是ADT Bundle,则包含了eclipse和adt tools.但是有些时候是在已经独立安装了Eclipse的基础上,在线安装ADT插件,就稍微麻烦了. 一.在线安装A ...

  7. [iOS基础控件 - 6.2] LOL英雄列表 UITableView单项显示

    A.需求 1.使用只有一个section的TableView来显示LOL 的英雄列表 2.内容包括标题.副标题.图标 3.使用plain样式 4.使用MVC模式     heros.plist 文件结 ...

  8. weblogic11g 安装——linux 无图形界面

    weblogic11g 安装——linux下无weblogic安装图形界面 注意:此次安装,没做server.ip .系统规划 目的:学习weblogic11g 在linux下  无图形安装的过程 j ...

  9. C/S 和 B/S 模式的区别与联系

    如果要比较两种事物之间的相同点和不同点,首先,我们要分别对这两种事物有一个最基本的了解. 一.C/S与B/S的定义 C/S (Client/Server)结构,即大家熟知的客户机和服务器结构.它是软件 ...

  10. 4G通信技术LTE介绍

    参考文档在这里 LTE技术 LTE是继GSM/EDGE和UMTS/HSxPA之后的由3GPP推出的移动网络技术最新标准,属于4G. 未来网络需要更高的数据速率,和包路由优化系统.更好的QoA和更廉价的 ...