图片在DIV里边水平垂直居中

≡放荡痞女 提交于 2019-12-06 12:08:17
图片在一个DIV中要垂直水平居中,首先定义一个DIV
.wrap{ width: 600px;
       height: 400px; 
       border: 1px #000 solid; 
      }
插入图片
       <div class="wrap">
        <img src="../img/img2.png" alt="">
       </div>
水平居中 在图片的父元素中用text-algin:center;进行水平居中
.wrap{ width: 600px;
       height: 400px; 
       border: 1px #000 solid; 
       text-algin:center
      }
垂直居中
    1.在图片前或者后定义一个span元素,给span添加声明width:0;height:100%;display:inline-block;
    2.给span转换成inline-block类型,并添加vertical-algin:middle中线对齐
    3.g给图片img添加添加vertical-algin:middle中线对齐
/*图片前面定义一个span标签*/
<span></span><img src="../img/img2.png" alt="">
/*span居中*/
    .wrap span{ 
        width: 0px; 
        height: 100%; 
        display: inline-block; 
        vertical-align: middle;
        }
/*图片居中*/
         .wrap img{ 
        vertical-align: middle;
        }
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!