如何将文字直接放在图片旁边

Question

我一直在尝试在图片旁边放置文字，以创建一个画廊，让人们可以看到车辆的价格和名称。 文本应放置在图像旁边，以使其看起来平滑。 我遇到的问题是我无法弄清楚如何将文本放在图像旁边，而不会发生溢出和div的使用。 感谢您的浏览，非常感谢！

我试过将文字放在中，分成几部分，最后使用

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

 <section class="persOpties"> <img class="imgpers" src="../media/opel/Adam.jpg" alt="Opel Adam"><figure>naam: Opel Adam<br>prijs: 13.050,00</figure> <img class="imgpers" src="../media/opel/Astra.jpg" alt="Opel Astra"><figure>naam: Opel Adam<br>prijs: 13.050,00</figure> <img class="imgpers" src="../media/opel/ComboL1.jpg" alt="Opel Combol1"><figure>naam: Opel Adam<br>prijs: 13.050,00</figure> <img class="imgpers" src="../media/opel/Corsa.jpg" alt="Opel Corsa"><figure>naam: Opel Adam<br>prijs: 13.050,00</figure> <img class="imgpers" src="../media/opel/CorsaX.jpg" alt="Opel Corsa x"><figure>naam: Opel Adam<br>prijs: 13.050,00</figure> <img class="imgpers" src="../media/opel/Crossland.jpg" alt="Opel Crossland"><figure>naam: Opel Adam<br>prijs: 13.050,00</figure> <img class="imgpers" src="../media/opel/MokkaX.jpg" alt="Opel Mokka"><figure>naam: Opel Adam<br>prijs: 13.050,00</figure> </section> 

Answer 1

试试这个代码

 .imgpers{ margin: 20px 20px; width: 20%; height: 20%; } .persOpties { display:flex; display:-webkit-flex; align-items:center; -webkit-align-items:center; margin-left: auto; margin-right: auto; text-align: right; } 

 <html> <body> <section class="persOpties-main"> <div class="persOpties"> <img class="imgpers" src="../media/opel/Adam.jpg" alt="Opel Adam"><figure>naam: Opel Adam<br>prijs: 13.050,00</figure> </div> <div class="persOpties"> <img class="imgpers" src="../media/opel/Astra.jpg" alt="Opel Astra"><figure>naam: Opel Adam<br>prijs: 13.050,00</figure> </div> <div class="persOpties"> <img class="imgpers" src="../media/opel/ComboL1.jpg" alt="Opel Combol1"><figure>naam: Opel Adam<br>prijs: 13.050,00</figure> </div> <div class="persOpties"> <img class="imgpers" src="../media/opel/Corsa.jpg" alt="Opel Corsa"><figure>naam: Opel Adam<br>prijs: 13.050,00</figure> </div> <div class="persOpties"> <img class="imgpers" src="../media/opel/CorsaX.jpg" alt="Opel Corsa x"><figure>naam: Opel Adam<br>prijs: 13.050,00</figure> </div> <div class="persOpties"> <img class="imgpers" src="../media/opel/Crossland.jpg" alt="Opel Crossland"><figure>naam: Opel Adam<br>prijs: 13.050,00</figure> </div> <div class="persOpties"> <img class="imgpers" src="../media/opel/MokkaX.jpg" alt="Opel Mokka"><figure>naam: Opel Adam<br>prijs: 13.050,00</figure> </div> </section> </body> </html>