帮助教程

  • img标签在div中水平垂直居中 vertical-align: middle无效解决方法

    最近更新时间:2019-01-07 00:18:45 138

    第一种方式: text-align:center; vertical-align:middle;

    最主要,一定要  

    <span></span>

    div{
                text-align: center;
                vertical-align:middle;width: 400px;
                height: 400px;
                border: 1px solid #000;
            }
            img{vertical-align: middle}
            span{height: 100%;vertical-align: middle;display: inline-block}
    
    
    <div style="">
        <span></span>
        <img src="ad-pic.png" alt="" style="border: 1px solid #000;">
    </div>

    第二种方式  通过设置img为绝对定位,处于垂直和水平50%,然后平移自身宽高的50%

    div{ 
                position: relative; 
                width: 400px;
                height: 400px;
                border: 1px solid #000;
            }
            img{
                position: absolute;
                top:50%; 
                left:50%;
                transform: translate(-50%,-50%);
            }



    以上内容是否对您有帮助?
  • Close