在图片下方放置链接答案

【问题标题】：Putting a link below an image在图片下方放置链接
【发布时间】：2021-12-05 16:08:27
【问题描述】：

我正在尝试在图片下方放置一个链接，无论出于何种原因，该链接一直在图片的一侧（右侧）。图片显示正常，链接有效，但我只需要图片下方的链接。

有什么想法吗？

HTML：

<div class="images">
  <img src="imgs/2.jpeg" width="280" height="350" alt="Exterior" />
  <a class="link1" href="https://www.google.com">Test</a>
</div>

CSS：

.images {
  position: absolute;
  left:10px;
  top: 200px;
  font-size: 120%;
}

我是 HTML/CSS 的新手，所以如果有人能用简单的术语解释一下，我将不胜感激。我尝试了很多不同的方法，例如跨度、对齐等，但都行不通！

如果我使用 p 语句而不是 ULR (h ref) 文本确实会在图像下方，所以我很困惑！

【问题讨论】：

<img> 和<a> 元素是display:inline 类型，通常用于文本。这是此显示类型的正常行为。您只需将两者的显示类型更改为display:block 或混合：display:inline-block

标签： html css image text alignment

【解决方案1】：

默认情况下，图像是内联元素 8，虽然被视为 inline-block)。您需要做的就是将图像设置为块级元素：img { display: block; }

img {
  display: block;
}

<div class="images">
  <img src="https://via.placeholder.com/100.jpg" width="280" height="350" alt="Exterior" />
  <a class="link1" href="https://www.google.com">Test </a>
</div>

【讨论】：

【解决方案2】：

您可以使用 display flex 使其成为一列。解释：https://www.w3schools.com/css/css3_flexbox_container.asp

.images {
  position: absolute;
  left: 10px;
  top: 200px;
  font-size: 120%;
  display: flex;
  flex-direction: column;
}

<div class="images">
  <img src="imgs/2.jpeg" width="280" height="350" alt="Exterior" />
  <a class="link1" href="https://www.google.com">Test </a>
</div>

【讨论】：

不需要使用flexbox...img { display: block; }就足够了。

【解决方案3】：

您可以在图片标签下方添加换行标签。

<div class = "images">
<img src="imgs/2.jpeg" width="280" height="350" alt="Exterior" />
<br>
<a class="link1" href = "https://www.google.com" >Test </a>
</div>

【讨论】：

错误使用br
@tacoshy 但它仍然可以正常工作如果我可以问，
标签的正确用法是什么？
好吧，它的使用并非完全错误。然而，设置为块级元素的图像具有一定的优势。因此，没有必要使用 br 来破坏块级元素。特别是如果您可以使用 CSS 解决样式问题，那么应该首选使用 html 标记
好的，谢谢大佬