在前端中,图片水平垂直居中对齐,你知道有几种方法?

在前端开发制作中,图片垂直居中对齐是很常见的,有些是固定高度,有些没有固定高度,本文分享我用的四种方法,希望对你有所启发。·

以下说的做法暂不考虑IE浏览器的兼容性,适用于移动端,对兼容性感兴趣的可以看之前的文章:图片垂直居中对齐的3种方法

以下的做法中假定外层的高度和宽度已经固定。通用HTML和CSS代码:

.img

1.相对定位+margin:auto

利用图片相对于外层浮动,加上margin:auto.·

.img1 .img1 img

2.flexbox

利用flexbox里面的垂直居中属性:align-items:center(垂直居中)和justify-content:center(水平居中);·

.img2

3.table-cell

利用display:table-cell+图片vertical-align:middle

.img3 .icenter .img3 img

4.增加一个空白标签

兼容性较好,支持IE浏览器

.img4 .img4 img .img4 .iblock

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20171210A07V7E00?refer=cp_1026

同媒体快讯

相关快讯

扫码关注云+社区