作为前端er,肯定碰到过将一组要将一组图标整齐排列的问题,图片一样大还好,不一样大的话,没经验还真是烦人呢。
如图,排列不整齐美观。为了方便你我他,我加了边框
如果粗暴的把图片设置为一样大小,那图片会失去原有比例,导致伸缩,不雅。一个一个调整也不靠谱。
如何是好。其实很简单,在给4个图片外面分别加个一样大小的div,然后让图片居中就好啦。
居中的方法有很多,我这里,
div {
border:
1
px
solid
blue;
width:
130
px;
height:
130
px;
position:
relative;
}
div>img {
border:
1
px
solid
red;
position:
absolute;
top:
50
%;
left:
50
%;
transform:
translate(
-50
%,
-50
%) css3的;分别表示偏移自身宽高的一半;
}
居中后:
还算整齐。忽视忽略我随便截的图。当然,一般我们都会把图片高度截成一样高的,这样再设置居中就会看起来很整齐,很舒服。
扫描二维码关注公众号,回复:
1927717 查看本文章