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

方法一

将外部容器的显示模式设置成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. C语言中数据类型转换的学习

    1. 整型和枚举类型数据的转换 测试代码如下: #include <stdio.h> typedef enum _E_TYPE_T {     E_TYPE_1 = -1,     E_T ...

  2. Maven学习系列二（1-5）

    Maven学习系列二(1-5) 本文转自 QuantSeven 博客,讲解精炼易懂,适合入门,链接及截图如下 http://www.cnblogs.com/quanyongan/category/47 ...

  3. dede 如何去除[field:title/]里面出现的b标签

    调用[field:title/]标签,两边加<b>怎么去掉<b> 怎么回事??? 最近更新dede的版本后,调用[field:title/]标签,生成的标题两边会自动在标题两边 ...

  4. 【Android - V】之DrawerLayout的使用

    DrawerLayout是Android V4包中的一个布局控件,用来实现一个抽屉样式的布局. DrawerLayout通过设置子视图的layout_gravity来决定子视图停靠在屏幕的哪个边缘外侧 ...

  5. 【Android - V】之Toolbar的使用

    Toolbar是Android V7包中的一个控件,用来代替Action Bar作为界面的头部标题栏布局.Toolbar相对于Action Bar的特点是更加灵活,可以显示在任何位置. 首先先来看To ...

  6. [React] React Fundamentals: Integrating Components with D3 and AngularJS

    Since React is only interested in the V (view) of MVC, it plays well with other toolkits and framewo ...

  7. linux可重入、异步信号安全和线程安全

    一 可重入函数 当一个被捕获的信号被一个进程处理时,进程执行的普通的指令序列会被一个信号处理器暂时地中断.它首先执行该信号处理程序中的指令.如果从信号处理程序返回(例如没有调用exit或longjmp ...

  8. hadoop小文件合并

    1.背景 在实际项目中,输入数据往往是由许多小文件组成,这里的小文件是指小于HDFS系统Block大小的文件(默认128M), 然而每一个存储在HDFS中的文件.目录和块都映射为一个对象,存储在Nam ...

  9. poj3348 Cows 凸包+多边形面积 水题

    /* poj3348 Cows 凸包+多边形面积 水题 floor向下取整,返回的是double */ #include<stdio.h> #include<math.h> # ...

  10. Annotation Type @bean，@Import，@configuration使用--官方文档

    @Target(value={METHOD,ANNOTATION_TYPE}) @Retention(value=RUNTIME) @Documented public @interface Bean ...