点击这里给我发消息 点击这里给我发消息

CSS实例:图片水平垂直居中于DIV(图片宽高未知)

添加时间:2011-9-8
    相关阅读: 开发 HTML CSS

如何实现一张宽高未知的图片在一个Div里面水平垂直居中呢?相信很多人首先想的是Table布局,是的,实现起来不是很麻烦,但肯定也有一些有代码洁癖的人。本文忽略Table的实现方法,有兴趣的也可以去研究一下。下面介绍下用Html和CSS来实现如题效果。
PS:你可以用Firebug或者任意浏览器的开发人员工具修改图片尺寸测试效果。

再看看代码,主要2部分:

HTML代码:

<div class=”demo”><a href=“#”><img src=“images/01.jpg” /></a></div>

CSS代码:

/*For Firefox Chrome*/
.demo{border:1px #ddd solid;width:208px;height:148px;overflow:hidden;text-align:center;display:table;float:left;margin:50px;position:relative;}
.demo a{display:table-cell;vertical-align:middle;width:200px;height:140px;}
.demo a img{border:1px #ddd solid;margin:0 auto;max-width:200px;max-height:140px;}
/*For IE7*/
*+html .demo a{position:absolute;top:50%;width:100%;text-align:center;height:auto;}
*+html .demo a img{position:relative;top:-50%;left:-50%;}
/*For IE6*/
*html .demo a{position:absolute;top:51%;width:100%;text-align:center;height:auto;display:block;}
*html .demo a img{position:relative;top:-50%;left:-50%;width:expression(this.width>200?“200px”:“atuo”);height:expression(this.height>140?“140px”:“atuo”);}

其中For IE6中的css有这么一段:

width:expression(this.width>200?“200px”:“atuo”);height:expression(this.height>140?“140px”:“atuo”);

这是限制IE6下图片的最大宽和最大高,就像非IE6下的:

max-width:200px;max-height:140px;

是一个道理。

其他也没什么要过多解释的了,你懂的!如果你对部分CSS不太懂的话,请参本站的的CSS一栏,或者前往w3school

本文作者:未知
咨询热线:020-85648757 85648755 85648616 0755-27912581 客服:020-85648756 0755-27912581 业务传真:020-32579052
广州市网景网络科技有限公司 Copyright◎2003-2008 Veelink.com. All Rights Reserved.
广州商务地址:广东省广州市黄埔大道中203号(海景园区)海景花园C栋501室
= 深圳商务地址:深圳市宝源路华丰宝源大厦606
研发中心:广东广州市天河软件园海景园区 粤ICP备05103322号 工商注册