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>

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

1 个答案: