以后地位:首页 > 建站常识 > 列表

img图片在div里垂直居中代码

点击: 次时候:2017/7/29关头词:上海网页设想 上海网站建造
图片在div里水平常中长短常简略的,可是在垂直居中方面就不是那末轻易了,img图片在div里垂直居中的最好处置计划,利用Flexbox来垂直居中图片。 方式一:将display设置成table-cell,而后水平常中设置text-align为center,垂
img图片在div里垂直居中代码

图片在div里水平常中长短常简略的,可是在垂直居中方面就不是那末轻易了,img图片在div里垂直居中的最好处置计划,利用Flexbox来垂直居中图片。

方式一:将display设置成table-cell,而后水平常中设置text-align为center,垂直居中设置vertical-align为middle。

div{width:150px;height: 100px;display: table-cell;vertical-align: middle;text-align: center}

img {width: 50px;height: 50px;}

方式二:经由过程position定位来完成。将div设置成相对定位relative,将img设置成相对定位absolute,left:50%,top:50%,此时图片的左上角位于div的中间,如果图片的中间位于div的中间,就须要将图片向上挪动图片高度的一半,并向左挪动图片宽度的一半。

div{width:150px;height: 100px;position: relative;}

img {width: 50px;height: 50px;position: absolute;top: 50%;left: 50%;

margin-top: -25px; /* 高度的一半 */

margin-left: -25px; /* 宽度的一半 */

}

预定建站
收费供给网站优化
支付关头词