zoukankan      html  css  js  c++  java
  • 图片水平垂直居中于DIV(图片未知宽高)

    HTML代码:

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

    css


    /*For Firefox Chrome*/
    .demo{border:1px #ddd solid;208px;height:148px;overflow:hidden;text-align:center;display:table;float:left;margin:50px;position:relative;}
    .demo a{display:table-cell;vertical-align:middle;200px;height:140px;}
    .demo a img{border:1px #ddd solid;margin:0 auto;max-200px;max-height:140px;}
    /*For IE7*/
    *+html .demo a{position:absolute;top:50%;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%;100%;text-align:center;height:auto;display:block;}

    *html .demo a img{position:relative;top:-50%;left:-50%;expression(this.width>200?"200px":"atuo");height:expression(this.height>140?"140px":"atuo");}

  • 相关阅读:
    CSS margin合并
    最大网络流
    js——this
    js——作用域和闭包
    CSS弹性(flexible)盒子
    CSS盒子模型
    修改html中button显示的文字
    远程唤醒UP Board
    UP Board 串口使用心得
    UP Board 网络设置一本通
  • 原文地址:https://www.cnblogs.com/tantry/p/4413944.html
Copyright © 2011-2022 走看看