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

来源:转载

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”:“auto”);height:expression(this.height>140?“140px”:“auto”);}

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

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

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

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

是一个道理。

分享给朋友:
您可能感兴趣的文章:
随机阅读: