Question

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

已经尝试使用节，位置，浮点数，文本对齐，...

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

 <include
        android:id="@+id/layout2"
        layout="@layout/layout_2" />

figure{
    display: flex;
    align-items: center;
}
figcaption {
}
.imgpers{
    margin: 20px 20px;
    width: 20%;
    height: 20%;
}
.persOpties {
    display:flex;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
}

Answer 2

您应将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>

如何将文本放置在<figure>中图像的右侧

2 个答案: