how to add a caption like text under image in css - html

Question

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.

Answer 1

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>

Answer 2

You can use CSS Flexbox. And for the text at the bottom of each image use position: absolute and making your parent position: relative.
Have a look at the snippet below:
.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>
Hope this helps!

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>