CSS图片两端对齐，自适应列表布局末行对齐修复实例页面

写在前面

前端开发，图片两端对齐，是十分常见的，也是十分痛苦的，我试过好多方法，经过整理，认为下面仍是比较靠谱的，在实践中你们能够试试，欢迎一块儿学习，一块儿进步

HTML代码

HTML代码很是简单，用的是DIV，里面用的是SPAN标签。没有采用Ul li  标签，是由于在实践应用中老是出现好多坑，不管怎么调试都解决不了，也许是我学艺不精吧。可是方法总比困难多，绕开他。使用css的display:inline-block，text-align:justify;下面简单介绍一下这两个：

 

display 属性规定元素应该生成的框的类型。inline-block是display中的一个属性值，表示将对象呈递为内联对象，对象的内容做为块对象呈递。旁边的内联对象会被呈递在同一行内，容许空格。这一性质正好知足咱们图片同行显示的要求。

text-align 属性规定元素中的文本的水平对齐方式。justify是text-align的一个属性值，表示两端对齐。

<div class="box">
<span class="list"><img src="http://agoodlife.cn/PicBox/201811/Infomaiton_200_180_Infomaiton_201811041101000.jpg" /><br />你好啊，个人朋友</span>
<span class="list"><img src="http://agoodlife.cn/PicBox/201811/Infomaiton_200_180_Infomaiton_201811041101000.jpg" /><br />你好啊，个人朋友~~</span>
<span class="list"><img src="http://agoodlife.cn/PicBox/201811/Infomaiton_200_180_Infomaiton_201811041101000.jpg" /><br />你好啊，个人朋友</span>
<span class="list"><img src="http://agoodlife.cn/PicBox/201811/Infomaiton_200_180_Infomaiton_201811041101000.jpg" /><br />你好啊，个人朋友</span>
<span class="list"><img src="http://agoodlife.cn/PicBox/201811/Infomaiton_200_180_Infomaiton_201811041101000.jpg" /><br />你好啊，个人朋友</span>
<span class="list"><img src="http://agoodlife.cn/PicBox/201811/Infomaiton_200_180_Infomaiton_201811041101000.jpg" /><br />你好啊，个人朋友</span>
<span class="list"><img src="http://agoodlife.cn/PicBox/201811/Infomaiton_200_180_Infomaiton_201811041101000.jpg" /><br />你好啊，个人朋友</span>
<span class="list"><img src="http://agoodlife.cn/PicBox/201811/Infomaiton_200_180_Infomaiton_201811041101000.jpg" /><br />你好啊，个人朋友</span>
<span class="list"><img src="http://agoodlife.cn/PicBox/201811/Infomaiton_200_180_Infomaiton_201811041101000.jpg" /><br />你好啊，个人朋友</span>
<span class="list"><img src="http://agoodlife.cn/PicBox/201811/Infomaiton_200_180_Infomaiton_201811041101000.jpg" /><br />你好啊，个人朋友</span>
<span class="list"><img src="http://agoodlife.cn/PicBox/201811/Infomaiton_200_180_Infomaiton_201811041101000.jpg" /><br />你好啊，个人朋友</span>
<span class="list"><img src="http://agoodlife.cn/PicBox/201811/Infomaiton_200_180_Infomaiton_201811041101000.jpg" /><br />你好啊，个人朋友</span>
<span class="list"><img src="http://agoodlife.cn/PicBox/201811/Infomaiton_200_180_Infomaiton_201811041101000.jpg" /><br />你好啊，个人朋友</span> 
</div>

CSS代码

.box{width:50%; line-height:0; padding:20px 20px 0; margin:20px auto; background-color:#f0f3f9; text-align:justify;} .list{width:120px; display:inline-block; line-height:1.4; padding-bottom:20px; text-align:center; vertical-align:top;} .list img{width: 100px; height: 128px;}

上面的CSS代码很是简单，我简单解释一下，box是个容器，添加了text-align:justify;目的是，使里面的文字两单对齐，里面的SPAN标签能够继承文字属性，为了使图片一行显示添加CSS样式 display:inline-block;这样就可使两端对齐，能够直接调整图片大小，每行的图片显示个数自动适应，最终效果以下图：

做为收藏笔记，但愿你们不断完善，谢谢！！！！！！！！！！！！！

原文出处：https://www.cnblogs.com/helpall/p/10129719.html