在开发文章页面的时候,会遇到对图文的处理,文字很简单啊,用text-again: justify;可以实现文本两端对齐,然后再设置首行缩进就OK了。

但是对于图片,我们不知道用户上传多大的图片,更不知道图片的宽度,要对图片进行居中处理感觉有点难度,下面分析一下我的思路:

处理办法想到两种

第一种:图片固定宽度

例如:图片设置成宽80%,居中的话就用margin,因为剩余宽度就剩20%了,这样所有的图片都是一样宽度,还比较美观。但是有缺点,比这个尺寸小的会模糊,比这个宽度大的会被压缩,很明显这不是我想要的效果。不过像“今日头条”手机端是这样的,细心的可以去看看!

img:{
width:80%;
margin-left:10%;
margin-right:10%;
}

第二种:就是利用弹性布局,让图片居中

例如:图片宽度自动,最大宽度80%,大于这个尺寸才会生效变成80%,左右自动;使用弹性布局display:flex,如果还需要垂直居中的话,那就再加上align-items: center;

.img:{
max-width: 80%;
margin-left: auto;
margin-right: auto;
display: flex;/*水平居中*/
justify-content: center;
}

这样我们的图片就会无论用户上传多大的图片,都会始终居中了!!!

2020-5-11 补充:

第三种:未知宽度图片水平垂直居中方法

position: absolute;top: 50%;left: 50%;transform: translateX(-50%) translateY(-50%);

前提:父盒子有position属性,且有宽高,不然是不会生效的。利用这一点可以使用全屏弹框效果:http://course.51qux.com/595.html

版权声明:原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。