<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. (Trie) uvalive 3942 Remember the word

    题意:告诉你一个母串和子串,能用多少种不同的方案组合出母串. 思路:字典树(显然)+DP DP: dp[i]+=dp[j+1]  i<=j<=m-1,且i到j的字符串能在字典树中找到.也就 ...

  2. Eclipse关联JavaDoc和源代码

    1.Eclipse 关联 JavaDoc 1.在 Eclipse 菜单中点击 Window -> Preferences,在弹出框中左侧选择展开 Java 节点,点击 Installed JRE ...

  3. android开发中遇到的问题

    7.ExpandableListView setOnChildClickListener无效,请在adapter的方法isChildSelectable返回true即可 6.使用<shape/& ...

  4. hdoj 1799 循环多少次？

    循环多少次? Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Subm ...

  5. ORA-01078, LRM-00123错误处理

    创建spfile时, 或者在nomount时, 出现下面的问题: SQL> create spfile from pfile; create spfile from pfile * ERROR ...

  6. Windows 环境下基于 Redis 的 Celery 任务调度模块的实现

    搭建环境: Windows-x64 10 Celery 3.1.23 Celery-with-redis 3.0 Redis-win32-win64 2.4.5   实现步骤: 1.安装 Redis ...

  7. OpenResty

  8. Aizu 2450 Do use segment tree 树链剖分+线段树

    Do use segment tree Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://www.bnuoj.com/v3/problem_show ...

  9. linux就是这个范儿之融于心而表于行(1)

    原创作品,允许转载,转载时请务必以超链接形式标明文章原始出处 .作者信息和本声明.否则将追究法律责 时间总是过得那么快,如流水一般哗啦啦的就淌走了一大堆!周遭事事沧桑变迁喧哗或耳语中流传的故事已渐模糊 ...

  10. [React Fundamentals] Component Lifecycle - Mounting Basics

    React components have a lifecycle, and you are able to access specific phases of that lifecycle. Thi ...