<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. leetcode@ [129] Sum Root to Leaf Numbers (DFS)

    https://leetcode.com/problems/sum-root-to-leaf-numbers/ Given a binary tree containing digits from 0 ...

  2. leetcode@ [68] Text Justification (String Manipulation)

    https://leetcode.com/problems/text-justification/ Given an array of words and a length L, format the ...

  3. yum cdh4

    cdh4 install for Centos6那个最美的年代,最好的时光,一路梦想,一路流泪,流的不会是懦弱的泪,而是对奋斗的寄于;1,repo配置>>>/etc/yum.repo ...

  4. Java之ByteArrayInputStream和ByteArrayOutputStream-操作字节数组的类

    ByteArrayInputStream和ByteArrayOutputStream 源:内存中的字节数组 目的:内存中的字节数组 这两个流对象不涉及底层资源的调用,操作的都是内存中的数组,所以不需要 ...

  5. C#将对象转换成JSON字符串，Newtonsoft.Json (JSON.NET)

    官方API说明文档 http://www.newtonsoft.com/json/help/html/N_Newtonsoft_Json.htm http://www.newtonsoft.com/ ...

  6. java对身份证验证及正则表达式解析

    原文地址:http://www.cnblogs.com/zhongshengzhen/ java对身份证验证及正则表达式解析 package service; import java.text.Par ...

  7. java+hadoop+spark+hbase+scala+kafka+zookeeper配置环境变量记录备忘

    java+hadoop+spark+hbase+scala 在/etc/profile 下面加上如下环境变量 export JAVA_HOME=/usr/java/jdk1.8.0_102 expor ...

  8. MySQL 子查询 EXISTS 和 NOT EXISTS

    MySQL EXISTS 和 NOT EXISTS 子查询 MySQL EXISTS 和 NOT EXISTS 子查询语法如下: SELECT ... FROM table WHERE EXISTS ...

  9. EntityFramework 连接数据库出错

    本文转载:http://www.cnblogs.com/shuang121/archive/2012/03/19/2406121.html 总结:选择“是”时,连接字符串的密码会暴露出来,“否”的时候 ...

  10. 将SCOM2007代理升级到 System Center 2012 SP1

    使用以下过程可以升级到 System Center 2012 Service Pack 1 (SP1), Operations Manager工程师.您应首先验证代理程序满足最小受支持的配置.有关详细 ...