<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 sdk api结构解析

    一.系统级:android.accounts android.app     1.OS 相关         android.os         android.os.storage         ...

  2. 基于Ubuntu14.10的Hadoop+HBase环境搭建

    本篇博文中谈及的Hadoop和HBase都是单机版,简单了解. 首先在Ubuntu上搭建Hadoop开发环境,主要参考另外一篇博客,仔细照做并解决出现的问题即可. 地址:http://www.powe ...

  3. Delphi XE5 安卓手机要求

    1 ARMv7 的 CPU v6 的肯定不支持. 2 黑屏是因为你的手机 CPU 不支持 NEON 特性.或者是 T2 海思 CPU .这 2 个不支持. 3 系统版本  2.3.3 到 2.3.9 ...

  4. javascript操作注册表

    try{                     var shell = new ActiveXObject("WScript.Shell"); //读注册表值var  key1  ...

  5. 将NavigationBar设置透明

    将NavigationBar设置透明(仅将指定视图控制器进行透明处理),步骤如下:1.在视图控制器的头文件中实现UINavigationControllerDelegate,例如:@interface ...

  6. 转载总结 C# 多态（虚方法，抽象，接口实现）

    前言:我们都知道面向对象的三大特性:封装,继承,多态.封装和继承对于初学者而言比较好理解,但要理解多态,尤其是深入理解,初学者往往存在有很多困惑,为什么这样就可以?有时候感觉很不可思议,由此,面向对象 ...

  7. Head First设计模式-观察者模式

    一.整体代码 Subject.java public interface Subject { public void registerObserver(Observer o); public void ...

  8. Clarkson不等式

  9. C#中反射的使用（How to use reflect in CSharp）（1）

    最近想做一个插件式的软件给公司的监控用,初步的想法是使用C#去反射Dll,Invoke其中的方法.此文仅供开发参考,不涉及原理,98%的代码以及2%的废话. 测试Solution是这么建的(.NET ...

  10. HBase 和 MongoDB在设计上的区别

    转载:http://leongfans.iteye.com/blog/1019383 昨天搜一下mongodb的资料,介绍应用的比较多,原理介绍的不多. 粗略得看了一下,总体来说两者的设计思路差不多, ...