css怎么实现图片在div中垂直居中(css,div,web开发)

时间:2024-04-29 12:54:41 作者 : 石家庄SEO 分类 : web开发
  • TAG :

  HTML代码

  <div>

  <imgsrc="images/1.jpg">

  </div>

  方法一

  利用position和margin共同实现

  通过给父元素设置绝对定位属性来让子元素相对于div定位

  relative是保留原来的位置进行定位并且是相对于自己原来的位置进行定位

  absolute是脱离原来位置定位,是相对于最近的有定位的父级进行定位;如果没有有定位的父级元素,就相对于文档进行定位

  注意:要使子元素的上下左右都为0,然后设置margin:auto就会自动垂直居中

  代码如下

  div{

  width:200px;

  height:200px;

  border:1pxsolid#ccc;

  position:relative;//父元素设置绝对定位

  }

  img{

  position:absolute;//相对定位

  width:80px;

  height:50px;

  top:0;

  left:0;

  right:0;

  bottom:0;

  margin:auto;//使其垂直居中

  }
css怎么实现图片在div中垂直居中

 </div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">
本文:css怎么实现图片在div中垂直居中的详细内容,希望对您有所帮助,信息来源于网络。
上一篇:Qt creator中项目构建配置和运行设置是怎么样的下一篇:

5 人围观 / 0 条评论 ↓快速评论↓

(必须)

(必须,保密)

阿狸1 阿狸2 阿狸3 阿狸4 阿狸5 阿狸6 阿狸7 阿狸8 阿狸9 阿狸10 阿狸11 阿狸12 阿狸13 阿狸14 阿狸15 阿狸16 阿狸17 阿狸18