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

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

方法一

将外部容器的显示模式设置成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>

来源:http://www.nowamagic.net/librarys/veda/detail/1950

随机推荐

手机站上离线宝被UC浏览器屏蔽解决方案
手机站上离线宝被UC浏览器屏蔽解决方案，在手机站上使用离线宝发现在UC浏览器中被屏蔽了。页面上会有很大一块空白，怎么办？利用一下代码可以解决离线宝被屏蔽时，去除头部空白。复制代码代码如下: document.writeln(script type=\text/javascript\ src=\
获取QQ信息的几个接口
可能有的朋友们早就在空间抓到了这些接口，不会的一定要自己抓包啊，IE9版本以前的可以用httpwatch，IE9自带抓包软件（快捷键F12）本论坛已经发布了登陆空间源代码，其中含有g_tk的计算，关于登陆的不用多说。在VB中首先登陆一个QQ，计算得到g_tk，然后用G
仿站小工具 V6.0
仿站小工具介绍：仿站小工具是通过网址下载静态网页的工具。从输入的网址下载html代码，提取出JS、Css、Image、Picture、Flash等静态文件网址，再从下载完好的Css代码中提取出Image静态文件网址，通过网址下载静态文件，根据软件设置好的保存规则，自动修正
让position:fixed在IE6下可用!
/*让position:fixed在IE6下可用!*/ .fixed-top/*头部固定*/{position:fixed;bottom:auto;top:0px;} .fixed-bottom/*底部固定*/{position:fixed;bottom:0px;top:auto;} .fixed-left/*左侧固定*/{position:fixed;right:auto;left:0px;} .fixed-right/*右侧固定
隐藏统计代码的LOGO文字
网站上添加网站统计代码后，一些情况下会影响网站整体的美观性，我们可以通过以下代码来隐藏统计代码的LOGO或文字。将各种统计代码放到以下div中即可：复制代码代码如下: !--统计代码开始-- div style=display:none; !--百度统计-- script type=text/java

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

方法一

方法二

方法三

相关文章

随机推荐