在图像下方放置 link

Question

我试图将 link 放在图片下方，但出于某种原因，link 一直向图片的一侧（右侧）移动。图像显示正常并且 link 有效，但我只需要它在图片下方。

有什么想法吗？

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 的新手，所以如果有人能用通俗易懂的语言解释一下，我将不胜感激。我已经尝试了很多不同的方法，例如 span、align 等，但都行不通！

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

Answer 1

您可以使用 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>

Answer 2

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

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

Answer 3

图像默认为内联元素 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>

在图像下方放置 link

Putting a link below an image

html

css

text

image

alignment