Html 试图将文本放在图片下面会弄乱对齐

我试图让文本在一行中的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> 

#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;
}

---

我试着做了一个数字和figcaption。尝试将每个图像分割成它自己的div，但它看起来就像是我现在改变的任何东西，将所有东西都垂直对齐，我试图保持水平

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

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

---

也许它能起作用。

我想这就是你要找的？另一个css仅用于视觉效果

  align-items: center;
  display: flex;
  height: 100vh;
  justify-content: center;

这是一个很好的实践，展示了使用flex可以实现什么

---

有几件事需要解决

1-关闭图像标签

2-图像的宽度和高度需要一个单位（例如px）。155必须是

155px

HTML

---

你所要做的就是将你的锚定标签在你的#SecondFooter div中向左浮动，就像这样

#SecondFooter a {
  float: left;
}

这就是HTML的外观。我在img标记后添加了一个p标记，并用一些文本进行演示

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

---

这是打字错误吗

您错过了图像标签上的结束括号对不起-是的，这是一个打字错误。当我把它放在这里的时候，我正在替换实际的img链接。请看我的解决方案，你的宽度和高度需要一个单位。您应该编辑问题以修复排版并修复它-谢谢。虽然我不确定你的答案对文本部分有什么帮助。它应该是怎样排列的。我不知道你在说什么，因为它不是你后期编辑的代码的一部分，每当图像从主div中分离出来时，它将图像放置在与水平方向相反的垂直线上尝试css属性

display:flex

来更改此设置。好的，将flex放在第二个页脚ID上是可行的。虽然现在它把图像推向左边，而不是居中。好吧，现在这个愚蠢的问题-我怎么能保持这个居中？因此，文本现在保留在图像下，但全部被推到左侧。我更新了解决方案，使其在屏幕上相对居中。去看看！

#SecondFooter a {
  float: left;
}

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

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

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

}

.wrapper {
  width: 90%;
  margin: 0 auto;
}

.link-wrapper {
  width: 60%;
  margin: 0 auto;
}