如何在CSS中的图像下添加文字说明 [英] how to add a caption like text under image in css

问题描述

您好我想在底部中心的图片上添加文字。它的照片库项目，因此所有的图像都是不同的尺寸。 Css需要使用百分比，因此它适用于所有尺寸的图片。

 < div class =images> 
< img src =dummy.jpeg> 
< p>出现一些文字> 
< / div> 
  

我尝试阅读很多关于stackoverflow的问题，但所有这些问题都适用于一张图片。我有不同尺寸的多个图像。

我想将文字放在图像的底部中央，黑色条纹的宽度为100％。它可以是文本背景。

使用绝对定位在标题< p>

创建容器 inline-block

Fiddle： jsfiddle.net/eohtwd1u

  .images {position：relative; display：inline-block;}。images p {position：absolute;宽度：100％; text-align：center;底部：0; left：0;}  

 < div class =images > < img src =https://placehold.it/350x150> < p>一些要显示的文本< / p>< / div>  

Hi I want to add text over an image at its bottom center. Its a photo gallery project so all the images are of different dimensions. Css needs to work with the percentages so it works on images of all sizes

<div class="images">
   <img src="dummy.jpeg">
   <p>Some text to appear>
</div>

I tried reading many questions on stackoverflow but all of them works for one image. I have multiple images with different dimensions.

I want to put the text at the bottom center of the image and a black strip that goes with width 100% over the image. It could be the text background.

解决方案

Use absolute positioning on the caption <p>
Make the container inline-block
Fiddle: jsfiddle.net/eohtwd1u

.images {
  position: relative;
  display: inline-block;
}

.images p {
  position: absolute;
  width: 100%;
  text-align: center;
  bottom: 0;
  left: 0;
}

<div class="images">
   <img src="https://placehold.it/350x150">
   <p>Some text to appear</p>
</div>

这篇关于如何在CSS中的图像下添加文字说明的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！