Images in grid and description in the center - html

Question

I've been looking around here and found several good answers but still didn't get around it. I want to achieve something like in this image.
5 small images with each of them has a number above. I tried this but as you can see the numbers were not in center (testing just the first row).
.grid-img {
display: inline-block;
}
<div class="grid-img">
<p>1</p>
<img src="img1" alt="image1">
</div>
<div class="grid-img">
<p>2</p>
<img src="img2" alt="image2">
</div>
<div class="grid-img">
<p>3</p>
<img src="img3" alt="image3">
</div

Answer 1

Check this. text-align: center; will place the number in center. Insert <br/> after the 3rd div. Please see below the updated code.
.grid-img {
display: inline-block;
text-align: center;
}
<div class="grid-img">
<p>1</p>
<img src="img1" alt="image1">
</div>
<div class="grid-img">
<p>2</p>
<img src="img2" alt="image2">
</div>
<div class="grid-img">
<p>3</p>
<img src="img3" alt="image3">
</div>
<br/>
<div class="grid-img">
<p>4</p>
<img src="img1" alt="image1">
</div>
<div class="grid-img">
<p>5</p>
<img src="img2" alt="image2">
</div>