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

方法一

将外部容器的显示模式设置成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. java 解析xml文件案例

    package xmlTest; import javax.xml.parsers.*; import org.w3c.dom.*; public class GetXml { public stat ...

  2. UML 的基本组成

    UML 是由UML构造块.规则.通用机制三部分组成的.而UML构造块由建模元素(事物).关系和图组成. 建模元素 建模元素是对模型中最具有代表性的成分的抽象.一般情况下,将建模元素分为结构元素.行为元 ...

  3. C# 自动登录网页，浏览页面【转载】

    需求:客户的数据同时存在在另外一个不可控的系统中,需要和当前系统同步. 思路:自动登录另外一个系统,然后抓取数据,同步到本系统中. 技术点:模拟用户登录:保存登录状态:抓取数据 /// <sum ...

  4. hdu1043Eight (经典的八数码)（康托展开+BFS）

    建议先学会用康托展开:http://blog.csdn.net/u010372095/article/details/9904497 Problem Description The 15-puzzle ...

  5. db4o官方停止支持及面向对象数据库的一些感想

    前一段时间试用了db4o,真心认为不错.但自己在国内搜索了一下,并没有找到不论什么一个专门的论坛和面向对象的数据库产品.深感这东西在国内并没有太普及. 但自己试用认为这个东东真心不错(当然也有自己的优 ...

  6. 分享一个牛逼的PHP无限极分类生成树方法，巧用引用(转)

    你还在用浪费时间又浪费内存的递归遍历无限极分类吗,看了该篇文章,我觉得你应该换换了.这是我在OSChina上看到的一段非常精简的PHP无限极分类生成树方法,巧在引用,整理分享了. function g ...

  7. Web classPath

    classpath,看名字,类路径,这样比如,对于java程序,就是告诉java程序哪里去找类.(java虚拟机都是通过类装载器的)想myeclipse中struts,spring,hibernate ...

  8. Linux之TCPIP内核参数优化

    /proc/sys/net目录 所有的TCP/IP参数都位于/proc/sys/net目录下(请注意,对/proc/sys/net目录下内容的修改都是临时的,任何修改在系统重启后都会丢失),例如下面这 ...

  9. HDU 4971 - A simple brute force problem【最大权闭合图】

    有n(20)个工程,完成每个工程获得收益是p[i],m(50)个需要解决的难题,解决每个难题花费是c[i] 要完成第i个工程,需要先解决ki个问题,具体哪些问题,输入会给出 每个难题之间可能有依赖关系 ...

  10. AS插件开发 RemoveButterKnife从构思到实现

    ReomveButterKnife插件 这是一个用于移除代码中对ButterKnife使用的AS插件,接下来我们将从头开始讲讲这个插件的开发过程 地址是 https://github.com/u3sh ...