Text in picture - html

Question

I am really struggling with getting a text in the middle of every picture.
My gallery has 50 pictures and each of them has a different size. This is my code but it doesn't work :/ could anyone help, please? All "sample" text should be in the middle of the.
html:
<div class="row">
<div class="column">
<img src="/artbook/1.jpg">
<p> sample </p>
<img src="/artbook/2.jpg">
<p> sample</p>
<img src="/artbook/3.jpg">
<p> sample</p>
<img src="/artbook/4.jpg">
<P> sample </p>
<img src="/artbook/5.jpg">
<P> sample </p>
</div>
</div>
css:
.column img {
margin-top: 10px;
vertical-align: middle;
display: block;
align-content: center;
max-width: 250px;
.column p{
position: absolute;
text-align: center;
z-index: 1;

Answer 1

Something like this should work using an outer div container. It also uses the translate function to properly center the text both vertically and horizontally according to the parent container. One thing to keep in mind is that when you want to position something according to the parent container then the parent container must also be relative or absolute.
Also, by default, a paragraph element has extra padding around it. You may prefer to use a div instead.
.column div.outer {
position: relative;
display: inline-block;
}
.column img {
margin-top: 10px;
vertical-align: middle;
align-content: center;
max-width: 250px;
}
.outer div{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
<div class="row">
<div class="column">
<div class="outer">
<img src="1.jpg">
<div> sample1 </div>
</div>
<div class="outer">
<img src="2.jpg">
<div> sample2</div>
</div>
<div class="outer">
<img src="3.jpg">
<div> sample3</div>
</div>
<div class="outer">
<img src="4.jpg">
<div> sample4 </div>
</div>
<div class="outer">
<img src="5.jpg">
<div> sample5 </div>
</div>
</div>
</div>

Answer 2

Check it out.
First create a holder for your image and text. Give it position:relative.
Now, absolutely position your p element containing text relative to its holder. But extend your p to all sides with top:0; bottom:0; left:0; right:0;. Now p is occupying the whole holder. Just apply display:flex; to it and center the content with justify-content:center; align-items:center.
.holder{
position:relative;
display:inline-block;
}
.holder:hover img{
filter: brightness(100%);
}
.column img {
filter: brightness(45%);
margin-top: 10px;
vertical-align: middle;
display: block;
align-content: center;
max-width: 250px;
}
.column p{
position: absolute;
display:flex;
justify-content:center;
align-items:center;
z-index: 1;
top:0;
bottom:0;
left:0;
right:0;
}
<div class="row">
<div class="column">
<div class='holder'>
<img src="http://via.placeholder.com/350x100">
<p> sample </p>
</div>
<div class='holder'>
<img src="http://via.placeholder.com/350x150">
<p> sample </p>
</div>
</div>
</div>