html - 如何将文本放在 中图像的右侧

Question

我一直在尝试通过将图像放在屏幕左侧并直接在其旁边添加文本来模拟汽车画廊。我一直在尝试使用 and 标签来尝试对齐它们，但到目前为止还没有成功。感谢您查看，如果这是一个菜鸟错误，我们深表歉意!

已经尝试过使用 sections、positions、floats、text-align,...

figure {
  float: left;
}

figcaption {
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 180px;
  text-align: center;
}

.imgpers {
  margin: 20px 20px;
  width: 20%;
  height: 20%;
}

.persOpties {
  display: flex;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto;
}

<section class="persOpties">
  <figure>
    <img class="imgpers" src="https://via.placeholder.com/300" alt="Opel Adam">
    <figcaption>naam: Opel Adam<br>prijs: 13.050,00</figcaption>
  </figure>
  <figure>
    <img class="imgpers" src="https://via.placeholder.com/300" alt="Opel Astra">
    <figcaption>naam: Opel Adam<br>prijs: 13.050,00</figcaption>

  </figure>
  <figure>
    <img class="imgpers" src="https://via.placeholder.com/300" alt="Opel Combol1">
    <figcaption>naam: Opel Adam<br>prijs: 13.050,00</figcaption>

  </figure>
  <figure>
    <img class="imgpers" src="https://via.placeholder.com/300" alt="Opel Corsa">
    <figcaption>naam: Opel Adam<br>prijs: 13.050,00</figcaption>
  </figure>
</section>

Answer 1

您应该将 display: flex; 和 align-items: center; 放在父级上。

figure {
  display: flex;
  align-items: center;
}

figcaption {
  padding: 15px;
}

.persOpties {
  display: flex;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto;
}

<section class="persOpties">
  <figure>
    <img class="imgpers" src="https://via.placeholder.com/300" alt="Opel Adam">
    <figcaption>naam: Opel Adam<br>prijs: 13.050,00</figcaption>
  </figure>
  <figure>
    <img class="imgpers" src="https://via.placeholder.com/300" alt="Opel Astra">
    <figcaption>naam: Opel Adam<br>prijs: 13.050,00</figcaption>

  </figure>
  <figure>
    <img class="imgpers" src="https://via.placeholder.com/300" alt="Opel Combol1">
    <figcaption>naam: Opel Adam<br>prijs: 13.050,00</figcaption>

  </figure>
  <figure>
    <img class="imgpers" src="https://via.placeholder.com/300" alt="Opel Corsa">
    <figcaption>naam: Opel Adam<br>prijs: 13.050,00</figcaption>
  </figure>
</section>