1. <html>
  2.     <head>
  3.          <style type="text/css">
  4.              .imgDiv {
  5.                  overflow: hidden;
  6.                  display:table;
  7.                  border-spacing:10px;
  8.                  position: absolute;
  9.                  left: 50%;
  10.                  top: 50%;
  11.                  width: 900px;
  12.                  height: 600px;
  13.                  margin-left: -450px;
  14.                  margin-top: -300px;
  15.              }
  16.              .imgDiv li {
  17.                  width:900px;
  18.                  height:600px;
  19.                  text-align:center;
  20.                  vertical-align:middle;
  21.                  position:relative;
  22.                  margin: 10px;
  23.                  *float:left;
  24.                  display: table-cell;
  25.              }
  26.              .imgDiv .imgDivs {
  27.                  *position:absolute;
  28.                  top:50%;
  29.              }
  30.              .imgDiv .imgDivs img {
  31.                  *position:relative;
  32.                  top:-50%;
  33.                  left:-50%;
  34.                  max-width:900px;
  35.                  max-height:600px;
  36.                  width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "900px": "auto" );
  37.                  height:expression(document.body.clientHeight>document.getElementById("pic").scrollheight*9/10? "600px": "auto" );
  38.              }
  39.         </style>
  40.     </head>
  41.     <body>
  42.         <div class="imgDiv">
  43.             <li><div class="imgDivs"><img src="http://mat1.qq.com/www/images/allskin/wmlogo.gif" ></div></li>
  44.         </div>
  45.     </body>
  46. </html>
  1. max-width:900px;
  2. max-height:600px;
  3. width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "900px": "auto" );
  4. height:expression(document.body.clientHeight>document.getElementById("pic").scrollheight*9/10? "600px": "auto" ); 
  5.  
  6. 其中这几句是对于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. 设计原则 Design Principle

    Design Principle设计原则 最近由于碰到要参与设计一个音频处理系统,有人提议用一个大的全局变量结构体来做状态信息交流的地方,引起了我对设计一个系统的思考,于是找到了如下资料,当然,关于这 ...

  2. java继承和多态

    父类和子类 如果类C1扩展自另一个类C2,那么C1称为子类或派生类,C2称为父类或基类.派生类可以从它的基类中继承可访问的数据域和方法,还可添加新数据域和新方法 例如:实现一个几何图形基类; clas ...

  3. Linux Shell 数学运算

    Linux Shell 数学运算 在Linux中直接使用数学运算符进行数学运算往往得不到我们想要的计算结果.要在Shell中进行数学运算,我们需要借助点小手段.目前,Linux Shell中进行数学运 ...

  4. algorithm@ 大素数判定和大整数质因数分解

    #include<stdio.h> #include<string.h> #include<stdlib.h> #include<time.h> #in ...

  5. 无法在Web服务器上启动调试，与Web服务器通信时出现身份验证错误

    问题描述: 我使用的是修改hosts,模拟真实网址来进行调试的.具体是这样的:我修改hosts文件,把某个域名,如www.163.com映射为127.0.0.1,然后在IIS信息管理器中,创建一个网站 ...

  6. 我是如何理解Java抽象类和接口的

    在面试中我们经常被问到:Java中抽象类和接口的区别是什么? 然后,我们就大说一通抽象类可以有方法,接口不能有实际的方法啦:一个类只能继承一个抽象类,却可以继承多个接口啦,balabala一大堆,就好 ...

  7. hdu 4612 (双联通+树形DP)

    加一条边后最少还有多少个桥,先Tarjan双联通缩点, 然后建树,求出树的直径,在直径起点终点加一条边去的桥最多, #pragma comment(linker, "/STACK:10240 ...

  8. MapReduce的流程

    1. Inputformat会从job的INPUT_DIR目录下读入待处理的文件,检查输入的有效性并将文件切分成InputSplit列表.Job实例可以通过setInputFormatClass(Cl ...

  9. PostgreSQL的prepare 和 execute 动作背后

    我给PostgreSQL的源代码加入了调试信息以后,会有如下表现: 我执行Prepare: postgres=# prepare s(; PREPARE postgres=# 背后的反应: ** In ...

  10. Effective C++ 条款45

    本节条款的题目是运用成员模板接受全部兼容类型 作者阐述自己的观点是通过智能指针的样例. 在学习本节条款之前我们要先明确关于隐式转化的问题 例如以下代码: #include<iostream> ...