如何将文字放在图片右侧<figure>

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

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

 <section class="persOpties"> <figure> <img class="imgpers" src="https://picsum.photos/200" alt="Opel Adam"> <figcaption>naam: Opel Adam<br>prijs: 13.050,00</figcaption> </figure> <figure> <img class="imgpers" src="https://picsum.photos/200" alt="Opel Astra"> <figcaption>naam: Opel Adam<br>prijs: 13.050,00</figcaption> </figure> <figure> <img class="imgpers" src="https://picsum.photos/200" alt="Opel Combol1"> <figcaption>naam: Opel Adam<br>prijs: 13.050,00</figcaption> </figure> <figure> <img class="imgpers" src="https://picsum.photos/200" alt="Opel Corsa"> <figcaption>naam: Opel Adam<br>prijs: 13.050,00</figcaption> </section> 

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>