你一定不晓得div里的图片是怎样水平垂直居中的
你一定不晓得div里的图片是怎样水平垂直居中的,这里小编供给了五种居中的办法,大家一起来看看吧。
body构造
办法一:
将display设定成table-cell,然后水平居中设定text-align为center,垂直居中设定vertical-align为middle。
效果如下图所示:
通过position定位来实现。将p设定成相对定位relative,将img设定成绝对定位absolute,left:50%,top:50%,此时图片的左上角位于p的核心,如果图片的核心位于p的核心,就需要将图片向上挪移图片高度的一半,并向左挪移图片宽度的一半。
效果如下图所示:
还是通过position定位来实现。将p设定成相对定位relative,将img设定成绝对定位absolute,left:50%,top:50%,此时图片的左上角位于p的核心,如果图片的核心位于p的核心,就需要将图片向上挪移图片高度的一半,并向左挪移图片宽度的一半,要是不晓得元素的宽高,可以用transform: translate(-50%,-50%);
办法四:
办法五:弹性布局flex
结果都同样,但愿能帮到大家!
本文转自:https://blog.csdn.net/DreamFJ/article/details/68921957
举荐教程:《HTML教程》
以上就是你一定不晓得div里的图片是怎样水平垂直居中的的细致内容,更多请关注 百分百源码网 其它相干文章!