码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2015-04-10 13:07:21      阅读:111      评论:0      收藏:0      [点我收藏+]

标签:

HTML代码:

<div class=”demo”><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");}

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

标签:

原文地址:http://www.cnblogs.com/tantry/p/4413944.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!