DIV或DIV里边的照片水平与竖直垂直居中的方式

日期:2021-03-01 类型:科技新闻 

关键词:公众号小程序,小程序正规价格表,微信群签到小程序,网络抽签小程序,个人做小程序需要什么

 

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

水平垂直居中的常见方法:

  text-align:center ——这能够完成子元素字体样式,照片的水平垂直居中。

  margin:0 auto —— 这是对于块元素的水平垂直居中方式

竖直垂直居中的常见方法:   

    vertical-align: middle;——这个竖直垂直居中特性,只对 inline 或 inline-block 元素合理。

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

div中照片水平静竖直垂直居中方法:

  第1种方法:立即手动式测算的方法。已知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; 就可以了。

  第2种方法:照片已知宽高

 img{
     position:relative;
     top:50%;
     left:50%;
     margin-top:负照片height的1半;
     margin-left:负照片width的1半;
   }

  第3种方法:照片未知宽高,box最好是固定不动高宽比。

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

 备注:假如不固定不动,自融入高宽比的话,照片估算会跑到div的上面1点。这类是应用css3的方法来完成水平竖直垂直居中,自然适配性的话,不适用transform就不适用这类方法了

  第4种方法: 把box作为模块格,box的宽高可无需设定,让照片自身扩大也行。这类方法box的宽高最好是固定不动。自然不固定不动也能完成实际效果。            

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

 备注: display: table-cell 非常因而把标识元素作为1个模块格来解决。唯1的缺陷便是IE6/7兼容问题。  

  第5种方法:应用table来做到水平竖直垂直居中的实际效果。table的宽高已知

html:

 <table class="img_meng_show">
   <tr>
     <td>
        <img src="">
     </td>
   </tr>
 </table>

css:  

 .img_meng_show td{
   vertical-align: middle;
    text-align: center;
 }

DIV水平静竖直垂直居中的方式:

第1种方法:

HTML:

<div class="box></div>

css:

  .box{
    position:absolute(或是fixed);
    top:0;
    left:0;
    bottom:0;
    right:0;
   margin:auto;
    width:100px;
    height:200px;
 }

 这个能完成div竖直和水平垂直居中,可是必要标准便是宽高务必再加,margin也务必再加。假如想里边的照片也水平静竖直垂直居中,能够参考上面照片用margin-left这类方法;

 假如只想竖直垂直居中,要是top与bottom,随后 margin:auto 0;

 同理,只想水平垂直居中,要是top与bottom,随后 margin: 0 auto;

 可是这类方式不适用ie8下列。

 第2种方法:

应用css3 translate的方式,也能让div竖直水平垂直居中:

.box{
    position: fixed(或absolute);
    top: 50%;
    left: 50%;
    width: 100px;
    /*height: 100px;*/高宽比能够不确定死
    background: skyblue;
    transform: translate(⑸0%,⑸0%);
}

假如是div中的div,即

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

 这类构造,还可以参照照片在div中水平静竖直垂直居中的方法完成。只是块元素的水平垂直居中的话 text-align: center; 要换为 margin: 0 auto;
 

总结

以上所述是网编给大伙儿详细介绍的DIV或DIV里边的照片水平与竖直垂直居中的方式,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!

上一篇:html/css中float波动的用法案例详解 返回下一篇:没有了