• DIV或者DIV里面的图片水平与垂直居中的方法


    <div class=“box”>
      <img />
    </div>

    水平居中的常用方式:

      text-align:center ——这可以实现子元素字体,图片的水平居中

      margin:0 auto —— 这是针对块元素的水平居中方法

    垂直居中的常用方式:    

        vertical-align: middle;——这个垂直居中属性,只对 inline 或者 inline-block 元素有效。

        这里没考虑flex的垂直居中的用法

    div中图片水平和垂直居中方式:

      第一种方式直接手动计算的方式。已知box的高度和图片的高度

    .box{
        width: 300px;
        height: 300px;
        border: 1px solid red;
        text-align: center;
    }
    img{
        width: 80px;
        height: 80px;
        padding-top: 110px;
    }

     备注:这种方式是:用box的高度减去图片的高度再除以2,就是padding-top的值,当然也可以使用margin-top,这样也可以实现图片在div里垂直居中。水平居中就用 text-align: center; 就行了。

      第二种方式图片已知宽高

    1 img{
    2     position:relative;
    3     top:50%;
    4     left:50%;
    5     margin-top:负图片height的一半;
    6     margin-left:负图片width的一半;
    7   }

      第三种方式图片未知宽高,box最好固定高度。

    img{
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }

     备注:如果不固定,自适应高度的话,图片估计会跑到div的上面一点。这种是使用css3的方式来实现水平垂直居中,当然兼容性的话,不支持transform就不支持这种方式了

      第四种方式: 把box当做单元格,box的宽高可不用设置,让图片自己扩张也行。这种方式box的宽高最好固定。当然不固定也能实现效果。             

    .box{
        width: 300px;
        height: 300px;
        vertical-align: middle;
        text-align: center;
        display: table-cell;
        border: 1px solid red;
    }

     备注: display: table-cell 相当于是把标签元素当作一个单元格来处理。唯一的缺点就是IE6/7不兼容。  

      第五种方式使用table来达到水平垂直居中的效果。table的宽高已知

    html:

    1 <table class="img_meng_show">
    2   <tr>
    3     <td>
    4        <img src="">
    5     </td>
    6   </tr>
    7 </table>

    css:  

    1 .img_meng_show td{
    2    vertical-align: middle;
    3    text-align: center;
    4 }

    DIV水平和垂直居中的方法:

    第一种方式:

    HTML:

    <div class="box></div>

    css:

     1 .box{
     2   position:absolute(或者是fixed);
     3   top:0;
     4   left:0;
     5   bottom:0;
     6   right:0;
     7   margin:auto;
     8   width:100px;
     9   height:200px;
    10 }

     这个能实现div垂直和水平居中,但是必要条件就是宽高必须加上,margin也必须加上。如果想里面的图片也水平和垂直居中,可以参照上面图片用margin-left这种方式;

     如果只想垂直居中,只要top与bottom,然后 margin:auto 0; 

     同理,只想水平居中,只要top与bottom,然后 margin: 0 auto; 

     但是这种方法不支持ie8以下。

     第二种方式:

    使用css3 translate的方法,也能让div垂直水平居中:

    .box{
        position: fixed(或者absolute);
        top: 50%;
        left: 50%;
        width: 100px;
        /*height: 100px;*/高度可以不定死
        background: skyblue;
        transform: translate(-50%,-50%);
    }

    如果是div中的div,即 

    <div class="out">
        <div class="in"></div>
    </div>

     这种结构,也可以参考图片在div中水平和垂直居中的方式实现。只是块元素的水平居中的话 text-align: center; 要换成 margin: 0 auto; 

  • 相关阅读:
    高并发秒杀系统架构设计 · 抢购、微信红包、一元夺宝
    Linux服务器集群系统(一)
    keepalived+nginx双机热备+负载均衡
    kafka的一些常用命令
    基于Keepalived实现LVS双主高可用集群
    如何生动形象、切中要点地讲解 OSI 七层模型和两主机传输过程
    MyBatis动态SQL foreach标签实现批量插入
    详解Vue生命周期
    centos 解压压缩包到指定目录
    门罗币(MONERO)钱包生成教程
  • 原文地址:https://www.cnblogs.com/zjjDaily/p/5952723.html
Copyright © 2020-2023  润新知