欢迎来到 jackNEss'窝窝
I like simple mind

纯css图片水平垂直居中方法介绍

2011年11月01日

纯css图片水平垂直居中方法介绍

其实这也是一个老生常谈的问题,这样的需求也十分普遍,多出现在做产品展示窗在图片高度宽度不确定的情况下的模块当中。解决方案也有几种,分为2类,一种是JS方法,一种是纯Css方法,嘛,在我认为,从网站性能的角度来讲,能不用js实现的,能用css实现的功能绝不用js,所以在这里给大家分享的是 通过css实现的方法,供大家参考。

利用table特性实现方式

这种方法就是利用 table 里面的 td 标签 当社长 valign = “middle” align = “center” 的时候,里面的内容就会自动 水平垂直居中的特性,对于稍微有点 html 知识的人都会懂得的方法。

<!-- html document -->	
<table>
	<tr>
		<td valign="middle" align="center"><img src="http://www.jackness.org/wp-content/themes/JStyle/images/default/blank.png" _src="xx.jpg" alt=""/></td>
	</tr>
</table>

这种是解决方案之一,不过缺点也很明显,就是代码较为复杂,而且一般的图片展示窗,弄个table、tr、td 进去…一个 图片的事情嵌套那么多的代码…各种不美观,不优美,不建议使用。

抛开table的实现方式

我们已经知道 table 有这样一种特性,so,我们可以通过 css2的 属性 display:table 和 display:table-cell 来通过 div 来模拟table,从而获得 table的 特性来实现 垂直水平居中的效果。

可惜的是,这2个属性只有 IE8+ 和其他浏览器如 opera,chrome,firefox 支持,而IE8 以下的浏览器并不支持这个属性。不过,通过 IE6、7对于 相对定位与绝对定位特殊的渲染方式,可以实现图片垂直水平居中效果,从而实现全浏览器兼容。下面是实现的代码,其中 key code注释下方的 css代码为关键代码。

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>图片垂直居中 demo</title>
</head>
<style type="text/css">
<!--
/*-- reset --*/
*{margin:0; padding:0;}
.imgbox{ float:left; display:inline; width:500px; height:500px; margin:10px; font-size:0; border:1px solid #e1e1e1; -moz-box-shadow:0 0 10px #e1e1e1;-webkit-box-shadow:0 0 10px #e1e1e1; box-shadow:0 0 10px #e1e1e1;}

/*-- key code --*/
.imgbox{ 
	*position:relative; 
	display:table;  
}
.imgbox span{
	*position:absolute; 
	*top:50%; 
	*left:50%; 
	*display:block; 
	display:table-cell; 
	vertical-align:middle; 
	text-align:center; 
}
.imgbox span img{ 
	*position:relative; 
	*top:-50%; 
	*left:-50%; 
}
-->
</style>
<body>
<div class="imgbox">
	<span><img src="http://www.jackness.org/wp-content/themes/JStyle/images/default/blank.png" _src="temp/sample_img.jpg" alt=""/></span>
</div>

<div class="imgbox">
	<span><img src="http://www.jackness.org/wp-content/themes/JStyle/images/default/blank.png" _src="temp/sample_img02.jpg" alt=""/></span>
</div>	
</body>
</html>

演示地址:http://www.jackness.org/lab/img-vertical-align-middle/demo.html

另外,这种方法不仅限适用在图片垂直居中,内容垂直居中 and 模块垂直居中同样适合。

题外话:

在写demo的过程中 遇到的 bug有 ie6的双边距bug 和 图片与容器下边界有间隙的bug,顺便在这里稍微说说对应的解决方案:

双边距bug

ie6特有的bug。

页面现象:浮动的第一个元素 的margin值渲染成双倍(margin-left:10px 那在ie6下看就相当于 margin-left:20px)

触发原因:元素浮动,并设有margin属性。

解决方案:设置元素 display:inline。

/* css document */
.imgbox{ float:left; display:inline; margin:10px; }

图片与容器下边界有间隙

各浏览器通病,故称之为特性。

页面现象:img图片下方距离父级容器出现大概3px的空隙。

触发原因:这是由于 img 为 行内元素 受 行高 line-height 影响,而行内对齐方式默认情况下是对齐 baseline 的,从而产生这样一个间隙。

解决方案:

  1. 设置 img display:block
  2. 设置 img 浮动
  3. 设置 img 父级 font-size:0
分类HTML + CSS
阅读 1,709
  • 评论加载中...

标签云

分类目录

最新留言

  • 评论加载中...

与我联系

如有疑问or建议可通过以下方式跟我取得联系.

Q Q:373435871
Email:jackness1208@gmail.com
© Copyright 2011 - 2014 jackNEss.org All Rights Reserved 粤ICP备14065612号
首页 | 关于我 | 网站地图 | RSS