zoukankan      html  css  js  c++  java
  • css 实现未知图片垂直居中

    1.demo html部分

    <div class="demo">
          <a href="#"><img src="img/help_03_03.png"/></a>
     </div>

    2.demo 的CSS部分

        .demo{
                border:1px solid #dddddd;
                208px;
                height:148px;
                overflow:hidden;
                text-align: center;
                display: table;
                float:left;
                margin:50px;
                position:relative;
            }

    a标签部分

            .demo a{
                display: table-cell;
                vertical-align: middle;
                200px;
                height:140px;
            }

    img图片部分

            .demo a img{
                border:1px solid #ddd;
                margin:0 auto;
                max- 200px;
                max-height: 140px;
            }

    ie7兼容写法

    /*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%;
            }

    ie6兼容写法

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

  • 相关阅读:
    课堂练习-电梯调度
    团队开发项目———来用————用户调研报告
    购书思想课堂作业4.14
    针对《来用》的NABC分析
    《梦断代码》读书笔记3
    《梦断代码》读书笔记2
    《大道至简》阅读笔记2
    《大道至简》阅读笔记1
    课堂练习之找出所有的“1”
    典型用户与场景分析
  • 原文地址:https://www.cnblogs.com/smivico/p/5201472.html
Copyright © 2011-2022 走看看