在网页设计过程中，有时候会希望图片垂直居中的情况。而且，需要垂直居中的图片的高度也不确定，这就会给页面的布局带来一定的挑战。下面总结了一下，曾经使用过的几种方法来使图片垂直居中，除了第一种方法只限于标准浏览器外，另外两种方法的兼容性还不错。

方法一

将外部容器的显示模式设置成display:table，这个设置的意思不用多说了吧… img标签外部再嵌套一个span标签，并设置span的显示模式为display:table-cell，这样span内部的内容就相当于表格，可以很方便的使用vertical-align属性来对齐其中的内容了。

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

<head>

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

    <title>方法1 - 未知高度的图片垂直居中 - www.nowamagic.net</title>

<style type="text/css">

body {

    height:100%;

}

#box{

    width:500px;height:400px;

    display:table;

    text-align:center;

    border:1px solid #d3d3d3;background:#fff;

}

#box span{

    display:table-cell;

    vertical-align:middle;

}

#box img{

    border:1px solid #ccc;

}

</style>

<!--[if lte IE 7]>

<style type="text/css">?

#box{

    position:relative;

    overflow:hidden;

}

#box span{

    position:absolute;

    left:50%;top:50%;

}

#box img{

    position:relative;

    left:-50%;top:-50%;

}

</style>

<![endif]-->

</head>

<body>

<div id="box">

    <span><img src="images/demo_zl.png" alt="" /></span>

</div>

</body>

</html>
方法二

标准浏览器的情况还是和上面一样，不同的是针对IE6/IE7利用在img标签的前面插入一对空标签的办法。

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

<head>

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

    <title>方法2 - 未知高度的图片垂直居中 - www.nowamagic.net</title>

<style type="text/css">

body {

    height:100%;

}

#box{

width:500px;height:400px;

display:table-cell;

text-align:center;

vertical-align:middle;

border:1px solid #d3d3d3;background:#fff;

}

#box img{

border:1px solid #ccc;

}

</style>

<!--[if IE]>

<style type="text/css">?

#box i {

    display:inline-block;

    height:100%;

    vertical-align:middle

    }

#box img {

    vertical-align:middle

    }

</style>

<![endif]-->

</head>

<body>

<div id="box">

    <i></i><img src="images/demo_zl.png" alt="" />

</div>

</body>

</html>
方法三

在img标签外包裹一个p标签，标准浏览器利用p标签的伪类属性:before来实现居中，另外，对于IE6/IE7使用了CSS表达式来实现兼容。

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

<head>

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

    <title>方法3 - 未知高度的图片垂直居中 - www.nowamagic.net</title>

<style type="text/css">

body {

    height:100%;

}

#box{

    width:500px;height:400px;

    text-align:center;

    border:1px solid #d3d3d3;background:#fff;

}

#box p{

    width:500px;height:400px;

    line-height:400px;  /* 行高等于高度 */

}

/* 兼容标准浏览器 */

#box p:before{

    content:".";  /* 具体的值与垂直居中无关，尽可能的节省字符 */

    margin-left:-5px; font-size:10px;  /* 修复居中的小BUG */

    visibility:hidden;  /*设置成隐藏元素*/

}

#box p img{

    *margin-top:expression((400 - this.height )/2);  /* CSS表达式用来兼容IE6/IE7 */

    vertical-align:middle;

    border:1px solid #ccc;

}

</style>

</head>

<body>

<div id="box">

    <p><img src="images/demo_zl.png" alt="" /></p>

</div>

</body>

</html>

CSS让图片垂直居中的几种技巧 三种方法介绍的更多相关文章

  1. JavaScript判断图片是否加载完成的三种方式

    JavaScript判断图片是否加载完成的三种方式 有时需要获取图片的尺寸,这需要在图片加载完成以后才可以.有三种方式实现,下面一一介绍. 一.load事件 1 2 3 4 5 6 7 8 9 10 ...

  2. CSS让图片垂直居中的几种技巧

    在网页设计过程中,有时候会希望图片垂直居中的情况.而且,需要垂直居中的图片的高度也不确定,这就会给页面的布局带来一定的挑战.下面总结了一下,曾经使用过的几种方法来使图片垂直居中,除了第一种方法只限于标 ...

  3. CSS设置图片垂直居中的方法

    如果是应用了表格,那么设置单元格为align="center"就可以使其中的一切内容居中.如果没有应用表格要想设置图片居中就有点困难了.困难来自不按"常规出牌" ...

  4. android系统通过图片绝对路径获取URI的三种方法

    最近做项目要通过图片的绝对路径找到图片的URI,然后删除图片,小小总结一下获取URI的方法,亲自试验在 android 4.1.3的系统上都是可用的. 1.将所有的图片路径取出,遍历比较找到需要的路径 ...

  5. 【读书笔记】iOS-开发技巧-三种收起键盘的方法

    - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typica ...

  6. Python｜读、写Excel文件（三种模块三种方式）

    python读写excel的方式有很多,不同的模块在读写的讲法上稍有区别: 用xlrd和xlwt进行excel读写: 用openpyxl进行excel读写: 用pandas进行excel读写: imp ...

  7. CSS背景图片垂直居中center不起效果完美解决

    背景图片居中CSS如下 background:#4892fe url("<%=basePath%>/img/login_bg.jpg") no-repeat cente ...

  8. css实现图片垂直居中

    1.行高 == 高度:已知图片的高宽 <div style="text-align: center; width: 500px;height:200px; line-height:20 ...

  9. 最近一个刚刚毕业的朋友说，他面试时候，遇到最频繁的css问题就是垂直居中，这里给出几种垂直居中方式！

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Matlab编程-基本命令行语句

    (1) mathlab命令行中“,”与“:”的区别: 结尾不加任何东西也会输出结果 以“,”结尾不显示变量数值,但是再次输入变量名之后可以输出变量值 以“:”结尾显示变量值 (2)    输出格式控制 ...

  2. Java反射获取类和对象信息全解析

    反射可以解决在编译时无法预知对象和类是属于那个类的,要根据程序运行时的信息才能知道该对象和类的信息的问题. 在两个人协作开发时,你只要知道对方的类名就可以进行初步的开发了. 获取类对象 Class.f ...

  3. Bridges painting - SGU 121（构造）

    题目大意:有个一无向图,给所有的边染色,如果一个点连接的边超过两个,那么最少要染一个白色和一个黑色,能否给整个图染色?不能输出“No solution”. 分析:引用连接 http://edward- ...

  4. (四) PHPCMSV9如何更换模板风格

    更换模板风格有两种方式: 1.复制default模板 2.到相关模板网站下载模板,推荐网站:http://www.moke8.com/phpcms/ 一.复制default模板  将phpcms默认的 ...

  5. 浅谈UML中类之间的五种关系及其在代码中的表现形式

    本文转载:http://www.cnblogs.com/DebugLZQ/archive/2013/05/13/3066715.html 什么是类? 将某类东西归纳在一起,可以成为一个类. 类有很多种 ...

  6. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（30）-本地化(多语言)

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(30)-本地化(多语言) 我们的系统有时要扩展到其他国家,或者地区,需要更多的语言环境,微软提供了一些解决 ...

  7. Linux内核之mmc子系统-sdio

    现在的Linux内核中,mmc不仅是一个驱动,而是一个子系统.这里通过分析Linux3.2.0内核,结合TI的arm335x平台及omap_hsmmcd host分析下mmc子系统,重点关注sdio及 ...

  8. 无需Cygwin，如果没有在命令行，Eclipse编NDK

    此链接    http://blog.csdn.net/xiaodongrush/article/details/28908829 參考链接    http://www.cnblogs.com/che ...

  9. UVALive3713-Astronauts(2-SAT)

    题目链接 题意:有A.B.C3个任务分配给n个宇航员,当中每一个宇航员恰好分配一个任务.如果n个宇航员的平均年龄为x,仅仅有年龄大于x的才干领取A任务:仅仅有年龄严格小于x的才干领取B任务,而任务C没 ...

  10. Qt 学习之路：QStringListModel

    上一章我们已经了解到有关 list.table 和 tree 三个最常用的视图类的便捷类的使用.前面也提到过,由于这些类仅仅是提供方便,功能.实现自然不如真正的 model/view 强大.从本章起, ...