• 1.解决自适应布局中div内部img距离底部4px的空白问题?2. img怎么实现水平垂直居中?


    1.解决自适应布局中div内部img距离底部4px的空白问题?

    示例代码:

    <style>
    .t1{
    自适应布局,外层盒子不给宽高(由内部元素撑开)
    }

    img{
    /* vertical-align:bottom; */     1.设置img vertical-align:bottom
    /* display:block; */     2.img 变成块级元素 display:block;  变成块级元素就无法在父元素设置可继承的text-align:center等了,而是使用 margin:xx auto;  水平居中


    </style>

    <body>
       <div class="t1">
      <img src="./TIM截图20171211210255.png" alt="">
      </div>

    </body>

    -------------------------------------------------------------------------------------

    2. img怎么实现水平垂直居中?

        1.

    .t1{
    /* 100px;
    height: 100px; */
    /* display:table-cell; */     //父元素添加:display:table-cell  text-align:center   vertical-align:middle
    /* text-align:center;
    vertical-align:middle; */


    /* position:relative; */      //或者父元素相对定位  子元素绝对定位
    }

    img{
    /* position:absolute;
    left:50%;
    top:50%;


    -webkit-transform: translate(-50%,-50%);     //transform margin 二选一即可
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    margin-left:-30px;
    margin-top:-30px; */

    }

  • 相关阅读:
    C语言 · 递归求二项式系数值
    C语言 · 错误票据
    C语言 · 色盲的民主
    C语言 · 分苹果
    C语言 · Quadratic Equation
    C语言 · 企业奖金发放
    C语言 · 最长单词
    C语言 · 高精度加法
    C语言 · 判断回文
    C语言 · 简单计算器
  • 原文地址:https://www.cnblogs.com/ccnNL/p/8541834.html
Copyright © 2020-2023  润新知