原帖链接：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. 实时监听文本框输入 oninput、onchange与onpropertychange事件的用法和区别

    前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onke ...

  2. [ASP.NET MVC] Razor 布局

    整体视图模板 View模板会先找到对应的controller文件,再找此文件下的Shared文件夹. 比如项目最外层的View/Shared 目录下有一个_Layout.cshtml模板页,有这样代码 ...

  3. [译] 反思 1 号进程 / Rethinking PID 1

    By Lennart Poettering 译 SReadFox 原文链接:http://0pointer.de/blog/projects/systemd.html 译注:笔者大约在 2011 年读 ...

  4. C# yield return用法

    本文实例讲述了C#中yield return用法,并且对比了使用yield return与不使用yield return的情况,以便读者更好的进行理解.具体如下: yield关键字用于遍历循环中,yi ...

  5. AppiumDesktop用法介绍

    转自:http://www.jianshu.com/p/bf1ca3d4ac76 写这篇文章的心情 真的很开心,我看着官网介绍竟然对AppiumDesktop略懂皮毛了.今天特意写出来,希望可以帮助一 ...

  6. Lombok的使用

    下面介绍几个我常用的 lombok 注解:         @Data   :注解在类上:提供类所有属性的 getting 和 setting 方法,此外还提供了equals.canEqual.has ...

  7. 201521123110《java程序设计》第八周学习总结

    1. 本周学习总结 2. 书面作业 1.List中指定元素的删除 上课就交了,编写时主要用remove方法,然后Iterator的remove()方法可删除当前下标为i的元素后,该元素后的所有元素将往 ...

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

    1. 本周学习总结 ArrayList代码分析 1.1 解释ArrayList的contains源代码 用于判断Collection中是否包含某个元素.List<T>的contains方法 ...

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

    本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 书面作业 ArrayList代码分析 1.1 解释ArrayList的contains源代码 answer:用于判断Collect ...

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

    1. 本周学习总结 2. 书面作业 1.clone方法 1.1 Object对象中的clone方法是被protected修饰,在自定义的类中覆盖clone方法时需要注意什么? 1.子类要实现Clone ...