如何在图像下添加文本

我有三个相邻的图像，并试图在每个图像下添加一个文本。然而，当我添加文本时，它不再在一行中保留3个，而是在每行上只生成1个图像。

您可以使用文本的绝对位置，并且文本将始终位于图像下方，如以下代码

.container{
display: flex;
justify-content: space-evenly;
align-items: center;                              
}
.card--wrap{
position: relative;
width: 300px;
height: 300px;
border: 1px solid black;
}
.card--img{
border: 1px solid gray;
width: 100px;
height: 100px;
position: absolute;
top :0;
text-align: center;
left: 25%;
font-size: 1rem;
}
.card--text{
border: 1px solid gray;
width: 100px;
height: 100px;
position: absolute;
bottom :0;
text-align: center;
font-size: 1rem;
left: 25%;
}

<div class="container">
<div class="card--wrap">
<div class="card--img">This is image </div>
<div class="card--text">This is a text </div>
</div>
<div class="card--wrap">
<div class="card--img">This is image </div>
<div class="card--text">This is a text </div>
</div>
<div class="card--wrap">
<div class="card--img">This is image </div>
<div class="card--text">This is a text </div>
</div>
</div>

.img-container{
display: flex;
justify-content: space-evenly;
}
.img-card img{
border: solid black 1px;
margin: 10px;
width: 200px;
}
.img-card p{
text-align: center;
margin-top: -10px;
}

<html>
<body>
<div class="img-container">
<div class="img-card">
<img src="https://cdn2.hubspot.net/hub/181021/file-338034070-jpg/images/real_world_examples.jpg">
<p>Message</p>
</div>
<div class="img-card">
<img src="https://cdn2.hubspot.net/hub/181021/file-338034070-jpg/images/real_world_examples.jpg">
<p>Message</p>
</div>
<div class="img-card">
<img src="https://cdn2.hubspot.net/hub/181021/file-338034070-jpg/images/real_world_examples.jpg">
<p>Message</p>
</div>
</div>
</body>
</html>

使用标记应该可以工作。

<figure>
<img src="https://github.com/Muzzammmill/Muzzammmill/blob/master/images/html.jpg" alt="" style="width:100%">
<figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>

供进一步参考：https://www.w3schools.com/tags/tag_figcaption.asp

解决方案2:

<div class="img">
<img src="https://github.com/Muzzammmill/Muzzammmill/blob/master/images/html.jpg" alt="" style="width:100%">
<div class="img-desc">This is a text </div>
</div>

也许这篇文章可以解决你的问题

<html>
<body>
<div class="container" style = "display:flex; jsutify-content: space-evenly;">

<div class="card1" style = "heigh:25%; width:25%">
<img src="thiIsImage1.jpg">
<p style ="text-align:center;  ">Message</p>
</div>

<div class="card1" style = "heigh:25%; width:25%">
<img src="thisIsImage2.jpg">
<p style ="text-align:center;  ">Message</p>    
</div>

<div class="card1" style = "heigh:25%; width:25%">
<img src="thisIsImage3.jpg">
<p style ="text-align:center;  ">Message</p>

</div>
</div>
</body>
</html>

相关内容

最新更新

热门标签：