如何在css中的图像下添加一个类似文本的标题

Question

嗨，我想在图像的底部中心添加文字。它的照片库项目，因此所有的图像都是不同的尺寸。 CSS需要与百分比工作，所以它适用于所有的图像尺寸

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

我试着读计算器上的很多问题，但是所有的人都适用于一个图像。我有不同尺寸的多个图像。

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

Answer 1

使用绝对定位的标题<p>
使容器inline-block
小提琴：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>

Answer 2

您可以使用CSS Flexbox的。并且为每个图像底部的文本使用position: absolute并使您的父母position: relative。

在下面的代码片段看一看：

.images { 
 
    display: flex; 
 
    padding: 5px; 
 
} 
 
.img-holder { 
 
    position: relative; 
 
    margin: 5px; 
 
    align-self: flex-start; 
 
} 
 
.img-holder p { 
 
    position: absolute; 
 
    bottom: 10px; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    width: 100%; 
 
    text-align: center; 
 
    margin: 0; 
 
}

<div class="images"> 
 
    <div class="img-holder"> 
 
    <img src="http://placehold.it/100x100"> 
 
    <p>Some text</p> 
 
    </div> 
 
    <div class="img-holder"> 
 
    <img src="http://placehold.it/120x120"> 
 
    <p>Some text</p> 
 
    </div> 
 
    <div class="img-holder"> 
 
    <img src="http://placehold.it/150x150"> 
 
    <p>Some text</p> 
 
    </div> 
 
</div>

希望这有助于！

Answer 3

             
  
 
   
 
    
<!-- comment to fool the edit limiter --> 
 

 
img{ 
 
    width:500px; 
 
    height:200px; 
 
    } 
 
.images{ 
 
    width:500px; 
 
    height:200px; 
 
    align-items:center; 
 
    position:relative; 
 
    
 
    } 
 
p{ 
 
    position:absolute; 
 
    bottom:0; 
 
    color:yellow; 
 
    left:50%; 
 
    } 
 
span{ 
 
    position: relative; 
 
    left: -50%; 
 
    }
 
    
<div class="images"> 
 
    <img src="https://i.stack.imgur.com/wwy2w.jpg"> 
 
    <p><span>Some text to appear></span></p> 
 
</div>