<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. POJ 1005 解题报告

    1.题目描述   2.解题思路 好吧,这是个水题,我的目的暂时是把poj第一页刷之,所以水题也写写吧,这个题简单数学常识而已,给定坐标(x,y),易知当圆心为(0,0)时,半圆面积为0.5*PI*(x ...

  2. 【转】Mybatis Generator最完整配置详解

    本文转简书:http://www.jianshu.com/p/e09d2370b796 --> --> <!-- 自动识别数据库关键字,默认false,如果设置为true,根据Sql ...

  3. kvm guest usb mapping

    http://www.linux-kvm.org/page/USB#Input_devices http://www.linux-kvm.org/page/USB_Host_Device_Assign ...

  4. linux之C编程实战小例

    人生匆匆一趟,打不打酱油?怎么打?怎么打"质量好点的酱油"?由你决定.打酱油是一种态度,更是一种生活! 哈哈,事不关己不开口,专心一意打酱油! 请记住下面些许话: 不要一味的说别人 ...

  5. 【组队训练】2015-2016 ACM-ICPC, NEERC, Southern Subregional Contest

    好多oj都崩掉了,于是打了cf.. 开始开的最后一题...尼玛题好长终于看完了...神题不会.... I过了好多人..看了下,一眼题...随便敲了下,1A ]; int main(){ int n, ...

  6. java学习之路---线程（重点）

     1.多线程是一种并发机制的有效手段.进程和线程一样,都是实现并发的一个基本单位.线程是比进程更小的一种实现单位,线程是在进程的基础上的进一步划分.所谓的多线就是在一个进程中产生了多个线程,这些线程可 ...

  7. Datatable的Select（）方法简介

    DataTable是我们在进行开发时经常用到的一个类,并且经常需要对DataTable中的数据进行筛选等操作,下面就介绍一下Datatable中经常用到的一个方法——Select,微软提供了四个函数的 ...

  8. 【STL学习】智能指针之weak_ptr

    简介 weak_ptr是shared_ptr的观察者,它不会干扰shared_ptr所共享对象的所有权,当一个weak_ptr所观察的shared_ptr要释放它的资源时,它会把相关的weak_ptr ...

  9. ECSHOP在线手册布局参考图--商品详情页 goods.dwt

        A.购物车 1,设置方法 程序自动读取购物车的商品数量 2,代码相关 cart.lbi 中 {insert_scripts files='transport.js'} <div clas ...

  10. Runtime 10种用法

    来源:haojingxue_iOS 链接:http://www.jianshu.com/p/3182646001d1 阅读了多篇运行时的文章,感觉都很不错,从几篇文章里面提取一些个人认为比较重要的,偏 ...