html - 在图形标签内对齐图像和 anchor 标签

Question

我被卡住了，没有想法，我试图用 flexbox 实现以下目标但失败了。

我想要实现的是让 img 标签在 figure 标签内居中，并让 a 标签包含另一个标签img 标签(就像显示第一张图片的不同版本的按钮)对齐在同一个 figure 标签的右下角。
让我试着用一张图片来解释:

A 是我们的图形标签，B 是我们的第一张图片，C 是我们的 anchor 标签，它本身包含另一张图片。
A 的大小为 350 像素 x 280 像素
B 是一个不同大小的透明 png，但总是比 A 小很多
C 包含一张 20px x 20px 的图片
容器 div#gallery 包含许多 figure 标签

这是我现在拥有的。

<div id="gallery" style="display: flex; flex-wrap: wrap; justify-content: center;">
  <figure style="background-color:#2A3132; width: 350px; height: 280px">
    <img src="https://via.placeholder.com/110x110">
    <a href="#">
      <img src="https://via.placeholder.com/30">
    </a>
  </figure>
</div>

我的理解是，我们不能在 A 中包含 C，因为这样它就错位了 B

Answer 1

我已经使用 position:absolute 来定位那个小图像。正如 OP 所提到的，图像不可能重叠，因此不会有问题。

#gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.wrapper {
  background-color: #2A3132;
  width: 350px;
  height: 280px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sm-img {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 30px;
  margin: 0 10px 10px 0;
  width: 30px;
}

<div id="gallery">
  <figure class="wrapper">
    <img src="https://via.placeholder.com/110x110">
    <a class="sm-img" href="#">
      <img src="https://via.placeholder.com/30">
    </a>
  </figure>
</div>