html - 如何将一张图片放在另一张图片下面并居中？

Question

我想知道是否有人知道如何在所有 4 张图片的相册封面下放置下载按钮图片，如下代码和图片所示:

<center>
    <img src="images/london-front-cover.jpg" alt="Londen front cover" width="200" height="200">
    <img src="images/london-volume.jpg" alt="Londen Volume (front cover)" width="200" height="200" border:none;>
    <img src="images/love-hate-volume.jpg" alt="Love Hate Volume (front cover)" width="200" height="200">
    <img src="images/gurbet-eli-volume.JPG" alt="Gurbet Eli Volume (front cover)" width="200" height="200">
    </br>
</center>
<a href="Londen-vol1.zip">
    <img src="images/downloadbutton.png" alt="downloadbutton" width="150" height="50">
</a>
</br>
</br>

Answer 1

这应该有效。您可以用图像替换 anchor 或在 a 标签内添加图像。

.clearfix {
  clear: both;
}
.divWithBtn {
  float: left;
  text-align: center;
}
.divWithBtn img,
.divWithBtn a{
  display: block;
  margin: 0 auto;
}

<div class="clearfix">
<div class="divWithBtn">
<img src="http://placehold.it/100x100" alt="">
<a href="">download</a>
</div>
<div class="divWithBtn">
<img src="http://placehold.it/100x100" alt="">
<a href="">download</a>
</div>
<div class="divWithBtn">
<img src="http://placehold.it/100x100" alt="">
<a href="">download</a>
</div>
<div class="divWithBtn">
<img src="http://placehold.it/100x100" alt="">
<a href="">download</a>
</div>
</div>