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

方法一

将外部容器的显示模式设置成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. Div 3 - SGU 105（找规律）

    分析:很容易知道序列1,2,3, 4,5, 6......与3的关系就是1,2, 0,1, 2,0,......如果是在一个数后面添加一个数就变成了这种序列1, 0, 0, 1, 0, 0, 1, 0 ...

  2. hpuoj 问题 C: 善良的国王【最小生成树kurskal】

    问题 C: 善良的国王 时间限制: 1 Sec  内存限制: 128 MB提交: 112  解决: 48[提交][状态][讨论版] 题目描述 很久很久以前,有一个贫困的国家,这个国家有一个善良爱民的国 ...

  3. unique mapped reads

    就是指唯一比对的reads 现在人们已经开始避免使用unique mapped reads这个概念了,而转向使用mapq值来保留高质量的比对结果.因为mapq值反应了一组比对结果发生的可能性,MapQ ...

  4. php类获取静态变量值以及调用

    <?php class Test{ public static $static_var = 20; } echo Test::$static_var;exit;

  5. CSU1306：Manor(优先队列)

    Description Bob有n个正整数,他将这n个整数根据大小划分成两部分.对于小于等于k的整数放在集合A中,其余的放在集合B中.每次他从集合B中取出一个最大的值,将其变成0放入A集合中.然后将A ...

  6. Android bitmap图片处理

    一.View转换为Bitmap         在Android中所有的控件都是View的直接子类或者间接子类,通过它们可以组成丰富的UI界面.在窗口显示的时候Android会把这些控件都加载到内存中 ...

  7. springmvc 例

    1.结构 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaXRscWk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCM ...

  8. HTML表单介绍

    表单语法结构如下: <form action="url" method="get|post" name="value" enctype ...

  9. inverse 相关设置

    <set name="students" table = "student" inverse="true"> <!-- 指 ...

  10. iOS Safari 中点击事件失效的解决办法

    问题描述 当使用委托给一个元素添加click事件时,如果事件是委托到 document 或 body 上,并且委托的元素是默认不可点击的(如 div, span 等),此时 click 事件会失效. ...