• 如何将img垂直居中?


    方法一:

    这种方法可实现图片超出frame尺寸时,自动选择水平、垂直居中,效果如下

    <div class="frame">
      <img src="foo"/>
    </div>
    
    .frame {  
        height: 160px; /*can be anything*/
         160px; /*can be anything*/
        position: relative;
    }
    img {  
        max-height: 100%;  
        max- 100%; 
         auto;
        height: auto;
        position: absolute;  
        top: 0;  
        bottom: 0;  
        left: 0;  
        right: 0;  
        margin: auto;
    }

    demo: 图片居中

    方法二:

    原理是,使用协助元素(这里是span),作为img的相邻元素,同为inline-block的两元素相邻时增加vertical-align: middle

    可使两元素垂直居中,代码如下

    <div class=frame>
        <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=250 />
    </div>
    
    .frame {
        height: 25px;      /* equals max image height */
         160px;
        border: 1px solid red;
        white-space: nowrap;
        
        text-align: center; margin: 1em 0;
    }
    
    .helper {
        display: inline-block;
        height: 100%;
        vertical-align: middle;
    }
    
    img {
        background: #3A6F9A;
        vertical-align: middle;
        max-height: 25px;
        max- 160px;
    }

    demo: 图片居中

  • 相关阅读:
    SQL Serever学习16——索引,触发器,数据库维护
    微信WeUI基础
    SQL Serever学习15——进阶
    SQL Serever学习14——存储过程和触发器
    微信WeUI入门2
    微信WeUI入门
    数据库—索引
    数据库—四种存储引擎
    视图
    事务
  • 原文地址:https://www.cnblogs.com/skura23/p/6815989.html
Copyright © 2020-2023  润新知