这个问题看上去很简单，实现起来也得下点功夫
image.png
- HTML
<div class="imgList_bg">
<ul id="imgList">
<li>
<img src="img/1.jpg" alt="">
</li>
<li>
<img src="img/2.jpg" alt="">
</li>
<li>
<img src="img/3.jpg" alt="">
</li>
<li>
<img src="img/4.jpg" alt="">
</li>
</ul>
</div>
- css
.imgList_bg {
position: absolute; //此属性根据需要确定上下位置
bottom: 10px;
width: 100%;
text-align: center
}
#imgList {
display: inline;
margin-left: -10px
}
#imgList li {
display: inline-block;
margin-left: 10px;
}
#imgList li img {
width: 100px;
height: 70px;
border: 3px solid #f8f8f8;
}
这样就可以是实现不同数量的li都可以水平居中
