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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>利用定位来显示垂直局中的图片</title>

<style type="text/css">

.miao{width:170px;height:100px;display:table;text-align:center;border:solid 1px red;}

.miao span{display:table-cell;vertical-align:middle;border:solid 1px blue;}

.miao span img{border:dashed 1px green;}

</style>

<!--[if lte IE 7]>

<style type="text/css">

.miao{position:relative;overflow:hidden;}

.miao span{position:absolute;left:50%;top:50%;}

.miao span img{position:relative;left:-50%;top:-50%;}

</style>

<![endif]-->

</head>

<body>

<h1>固定高宽的容器中，图片垂直局中。</h1>

<p>绿色容器是span，目的是使自己的左上角与容器中心点对齐。红色是具体图片，再次设置负值使自己的中心点和父容器的中心点重合，最终达到垂直局中的目的。</p>

<div class="miao">

	<span><img src="http://bbs.blueidea.com/images/default/logo.gif" alt="Logo" /></span>

</div>

<hr />

<div class="miao" style="width:300px;height:80px;">

	<span><img src="ttp://bbs.blueidea.com/images/default/logo.gif" alt="Logo" /></span>

</div>

<hr />

<div class="miao" style="width:500px;height:220px;">

	<span><img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" alt="Google" /></span>

</div>

</body>

</html>

　　

2、display:inline-block 方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<style type="text/css">

div {

	display:table-cell;

	height:300px;

	width:500px;

	text-align:center;

	border:1px solid #000;

	vertical-align:middle

	}

</style>

<!--[if IE]>

<style type="text/css">

i {

	display:inline-block;

	height:100%;

	vertical-align:middle

	}

img {

	vertical-align:middle

	}

</style>

<![endif]-->

<div>

<i></i>

	<img src="http://www.baidu.com/img/logo.gif" alt=""/>

</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. JavaScript面向对象(二)——成员属性、静态属性、原型属性与JS原型链

      前  言 JRedu 上一篇博客中,我们介绍了JS中的面向对象,并详细的解释了this的指向问题.本篇博客,我们继续来学习JS的面向对象.来深入理解一下JavaScript OOP中的成员属性/方 ...

  2. 微信中通过页面(H5)直接打开本地app的解决方案

    简述 微信中通过页面直接打开app分为安卓版和IOS版,两个的实现方式是完全不同的. 安卓版实现:使用腾讯的应用宝,只要配置了“微下载”之后,打开链接腾讯会帮你判断本地是否已经安装了app,如果本地安 ...

  3. 团队作业4——第一次项目冲刺 FiRsT DaY

    项目冲刺--first blood 今天是阳光明媚的一天[明明是阴天好吗= =],今天是心情愉悦的一天[每天都要提交博客高兴个水水哦-3-] 天霸动霸.tua小队迎来了第一敏捷冲刺,小伙伴们是时候打起 ...

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

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 2. 书面作业 本次作业题集集合 List中指定元素的删除(题目4-1) 1.1 实验总结 在covnertS ...

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

    1. 本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 参考资料: XMind List列表:元素以线性方式存放,允许有重复的对象. Set集:集合中的对象不按特定的方式排序,并且 ...

  6. 201521123098 《Java程序设计》第6周学习总结

    1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰,内容覆盖 ...

  7. Python[小甲鱼009了不起的分支和循环3]

    for语句语法: for 目标 in 表达式: 循环体 例子1: favourite = 'Idmask' for i in favourite: print(i, end= ' ') 上面的输出结果 ...

  8. 32位汇编第六讲,OllyDbg逆向植物大战僵尸,快速定位阳光基址

    32位汇编第六讲,OllyDbg逆向植物大战僵尸,快速定位阳光基址 一丶基址,随机基址的理解 首先,全局变量的地址,我们都知道是固定的,是在PE文件中有保存的 但是高版本有了随机基址,那么要怎么解决这 ...

  9. 读取指定excel，修改并某个值并另存到指定路径

    HSSFWorkBook是解析excel2007以前的版本(xls)之后的版本使用XSSFWrokBook(xlsx) 附:处理excel2007之后的版本代码: package gbyp.autoQ ...

  10. Node.js 异步异闻录

    本文首发在个人博客:http://muyunyun.cn/posts/7b9fdc87/ 提到 Node.js, 我们脑海就会浮现异步.非阻塞.单线程等关键词,进一步我们还会想到 buffer.模块机 ...