如何將文字放在圖片右側<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>