美文网首页我爱编程
纯CSS实现图片水平垂直居中于DIV(图片未知宽高)

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

作者: _朽木 | 来源:发表于2018-04-11 11:59 被阅读0次

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

    相关文章

      网友评论

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

        本文链接:https://www.haomeiwen.com/subject/alpahftx.html