原帖链接：http://bbs.blueidea.com/thread-2666987-1-1.html

1、因为Opera，FF3，IE8均支持display:talbe;这些特性了，因此改进的办法是：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>利用定位来显示垂直局中的图片</title>
  6. <style type="text/css">
  7. .miao{width:170px;height:100px;display:table;text-align:center;border:solid 1px red;}
  8. .miao span{display:table-cell;vertical-align:middle;border:solid 1px blue;}
  9. .miao span img{border:dashed 1px green;}
  10. </style>
  11. <!--[if lte IE 7]>
  12. <style type="text/css">
  13. .miao{position:relative;overflow:hidden;}
  14. .miao span{position:absolute;left:50%;top:50%;}
  15. .miao span img{position:relative;left:-50%;top:-50%;}
  16. </style>
  17. <![endif]-->
  18. </head>
  19. <body>
  20. <h1>固定高宽的容器中，图片垂直局中。</h1>
  21. <p>绿色容器是span，目的是使自己的左上角与容器中心点对齐。红色是具体图片，再次设置负值使自己的中心点和父容器的中心点重合，最终达到垂直局中的目的。</p>
  22. <div class="miao">
  23. 	<span><img src="http://bbs.blueidea.com/images/default/logo.gif" alt="Logo" /></span>
  24. </div>
  25. <hr />
  26. <div class="miao" style="width:300px;height:80px;">
  27. 	<span><img src="ttp://bbs.blueidea.com/images/default/logo.gif" alt="Logo" /></span>
  28. </div>
  29. <hr />
  30. <div class="miao" style="width:500px;height:220px;">
  31. 	<span><img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" alt="Google" /></span>
  32. </div>
  33. </body>
  34. </html>

　　

2、display:inline-block 方法

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <style type="text/css">
  3. div {
  4. 	display:table-cell;
  5. 	height:300px;
  6. 	width:500px;
  7. 	text-align:center;
  8. 	border:1px solid #000;
  9. 	vertical-align:middle
  10. 	}
  11. </style>
  12. <!--[if IE]>
  13. <style type="text/css">
  14. i {
  15. 	display:inline-block;
  16. 	height:100%;
  17. 	vertical-align:middle
  18. 	}
  19. img {
  20. 	vertical-align:middle
  21. 	}
  22. </style>
  23. <![endif]-->
  24. <div>
  25. <i></i>
  26. 	<img src="http://www.baidu.com/img/logo.gif" alt=""/>
  27. </div>

　　

CSS图片垂直居中方法整理集合的更多相关文章

  1. CSS图片垂直居中方法

    让div里面的多行文本垂直居中的方法: div{height:100px;width:100px;border:solid 1px red;text-align:center; display:tab ...

  2. css图片垂直居中

    css图片垂直居中一.style代码 .case-pic{ height: 125px; position: relative; text-align: center } .case-pic span ...

  3. css 小问题解决方法整理

    1,图片垂直居中: 设置包括图片的div:height=20px:line-height=20px. 设置图片vertical-align:middle 就可以. 2,行内块元素有3px bug,可通 ...

  4. css水平垂直居中方法（一）

    第五种方法: 首先设置一个div,设置其的width与height,为了方便观察,我定义了div的背景色为red,代码如下: <!doctype html> <html lang=& ...

  5. css 图片垂直居中总结

    1.利用vertical-align:middle: 父级元素设置成display:table-cell; 同级元素设置一个span标签 设置display:inline-block:图片样式设置ve ...

  6. CSS垂直水平居中方法整理

    CSS定位中常常用到垂直居中,比如覆盖层上的弹框. 兼容性比较好的方法: <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transition ...

  7. CSS——图片替换方法比较

    图片替换主要是指将文字替换成图片的技术,即在html语句中使用文字,浏览器显示时用对应的图片显示.其意义在于便于做网站优化(SEO),文字才是搜索引擎寻找的主要对象. 经典的替换方法: Fahrner ...

  8. CSS元素垂直居中方法总结

    坚持,坚持,坚持... 以上为自我鼓励,哈哈... ------------------------------------------------- 相信没有真正是尝试过的人应该都和我一样,觉得居中 ...

  9. css元素垂直居中方法

    1.Line-height 适用情景:单行文字垂直居中技巧 这个方式应该是最多人知道的了,常见于单行文字的应用,像是按钮这一类对象,或者是下拉框.导航此类元素最常见到的方式了.此方式的原理是在于将单行 ...

随机推荐

  1. Vuejs 页面的区域化与组件封装

    组件的好处 当我用vue写页面的时候,大量的数据页面渲染,引入组件简化主页面的代码量,当代码区域块代码差不多相同时,组件封装会更加简化代码.组件是Vue.js最强大的功能之一. 组件可以扩展HTML元 ...

  2. CSS3四个自适应关键字——fill-available、max-content、min-content、fit-content

    前面的话 一般地,有两种自适应:撑满空闲空间与收缩到内容尺寸.CSS3将这两种情况分别定义为'fill-availabel'和'fit-content'.除此之外 ,还新增了更细粒度的'min-con ...

  3. docker+tomcat 启动时非常慢原因之JRE /dev/random阻塞

    docker+tomcat 启动时非常慢,一般正常启动几十秒的,发现docker+tomcat启动竟需要几分钟,不可思议 根本原因是 SecureRandom 这个 jre 的工具类的问题.那为什么 ...

  4. oracle数据块核心剖析

    详见: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp57 数据块(Oracle Data Blocks),本文简称为" ...

  5. Unity2017.x 版本的下载安装

    Unity2017 版本从2017年7月开始正式发布Unity2017.1版本,为了初学者更加清晰明了的掌握全过程,笔者还是以完整的共19个步骤来给大家演示下载与配置安装的全过程,方便广大读者的无障碍 ...

  6. Swing-选项卡面板JTabbedPane-入门

    注:非原创,内容源自<Swing 的选项卡面板>,笔者做了少量修改. 选项卡面板是一个很常用的Swing组件,在window下,右击我的电脑,查看属性,就是一个典型的选修卡面板.当然还有最 ...

  7. 201521123037 《Java程序设计》第7周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 2. 书面作业 1. ArrayList代码分析 1.1 解释ArrayList的contains源代码 查看ArrayLi ...

  8. 201521123013 《Java程序设计》第4周学习总结

    1. 本章学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. 1.多态是面向对象的三大特性之一.多态的意思:相同的形态,可以实不同的行为.Java中实现多 ...

  9. 201521123055 《Java程序设计》第2周学习总结

     1. 本章学习总结 (1)认识PATH和CLASSPATH (2)SET PATH/CLASSPATH和-cp的用法 (3)了解BigDecimal.BigInteger.ArrayList/Lis ...

  10. 社工数据搜索引擎搭建 - Build Social Engineer Evildata Search Engine

    如何设计搭建一个社工库 从初起设计一个社工库,到现在的Beta,前前后后零零整整花了不下一个月的时间,林林总总记录下来,留给需要之人 泄露数据库格式不一,长相奇葩,因需将用户名.密码.邮箱.哈希等信息 ...