html - 试图把文字放在图片下面会弄乱对齐

Question

我正在尝试让文本在连续 3 个图像下对齐。我在这里找到的每个解决方案最终都会将图像放在与水平线相对的垂直线上。

HTML:

<div id="SecondFooter" class="responsiveColumn">
            <a href="link here" target="_blank"><img src="img.jpg"></a>
            <a href="link here" target="_blank"><img src="img.jpg"></a>
            <a href="link here" target="_blank"><img src="img.jpg"></a>
</div> 

CSS:

#SecondFooter {
    width: 600px;
    background-color: #ffffff; 
    color: #000000; 
    font-family: arial,helvetica,sans-serif; 
    font-size: 11px;
    text-align: center;
}

#SecondFooter img{
    display: inline-block;
    width: 155px;
    height: 155px;
    padding: 5px;
    margin: 0;
}

我试过制作图形和图形说明。尝试将每个图像分离到它自己的 div 中，但它看起来就像我改变它现在的样子一样，将所有东西都垂直对齐，我试图保持水平。

Answer 1

创建一个主 div 并将所有其他图像 div 放入其中怎么样？有点像

<div> 
   <div>
      <img>
      <p>
   </div>
   <div>
      <img>
      <p>
   </div>
   <div>
      <img>
      <p>
   </div>
</div>

也许它会完成工作。