如何在图像下添加文本
如何在图像下添加文本
提问于 2022-10-04 22:01:06
我有3张图片在彼此的旁边，并试图在每个图片下添加一个文本。但是，当我添加文本时，它不再将3保存在一行中，而是在每行上只生成一个图像。
回答 4
Stack Overflow用户
发布于 2022-10-04 22:34:31
您可以对文本使用绝对位置，文本将始终保留在图像下面，就像下面的代码一样
.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>
Stack Overflow用户
发布于 2022-10-04 22:49:14
使用标记应该有效。
<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>Stack Overflow用户
发布于 2022-10-04 22:50:05
.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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73954021
复制相关文章
相似问题
腾讯云开发者
