這個問題看上去很簡單虱肄，實現(xiàn)起來也得下點功夫
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; //此屬性根據(jù)需要確定上下位置
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;
}
這樣就可以是實現(xiàn)不同數(shù)量的li都可以水平居中
