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

Question

我想知道是否有人知道如何在所有4张照片的专辑封面下面有下载按钮图片，如下面的代码＆amp;图片：

<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

这应该有效。您可以使用图像替换锚点，也可以在标记内添加图像。

.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>

Answer 2

首先，我想建议您学习一个响应式CSS框架的基础知识，例如Bootstrap。当您使用可用的正确类时，您将获得许多这些扭结。但即使没有bootstrap，也要学习text-align:center; float:left; display:block的使用。这些组合将帮助您一路走来。

尽管如此，这是一个适合你的DEMO

Answer 3

首先， long 时间已弃用<center>，不应再使用display:inline-block。我很惊讶他们还在教这个。

将每个图像和按钮包装在自己的容器中，并将容器设置为text-align:center。

将所有容器放入主包装器并应用.wrapper { text-align: center; } .divWithBtn { display: inline-block; vertical-align: top; } .divWithBtn img, .divWithBtn a { display: block; margin: 0 auto; }。

＆＃13;

＆＃13;

<div class="wrapper">
  <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>

＆＃13;

B.ID_A

＆＃13;

＆＃13;

＆＃13;