How to align caption below each photo? - html

Question

I'm trying to do a photo gallery when user can upload photos and display them. Multiple photos display in the same line but I want to add a caption under each and I can't manage it. Can someone help me with this?
Here's my HTML/PHP code:
$image_path is an uploaded photo and basename($image_path) is a caption
.container .gallery a img {
float: left;
position: relative;
height: 150px;
width: 20%;
border: 2px solid #fff;
-webkit-transition: -webkit-transform .15s ease;
-moz-transition: -moz-transform .15s ease;
-o-transition: -o-transform .15s ease;
-ms-transition: -ms-transform .15s ease;
transition: transform .15s ease;
object-fit: cover;
}
<div class="gallery">
<a href="<?= $image_path; ?>">
<img src="<?= $image_path; ?>">
</a>
<?=basename($image_path)?>
</div>

Answer 1

Try to add :
.container .gallery {
width: 20%;
position: relative;
float: left;
text-align: center;
}
and replace float:left; to float:none;& width:100%; in .container .gallery a img

Answer 2

I think you need something like this, it isn't ?
figure {
padding: 5px;
max-width: 150px;
margin: auto;
display: inline-block;
}
figcaption {
background-color: #222;
color: #fff;
font: italic smaller sans-serif;
text-align: center;
}
<div class="gallery">
<figure>
<a href="#">
<img src="https://via.placeholder.com/150"
alt="Elephant at sunset"></a>
<figcaption>An elephant at sunset</figcaption>
</figure>
<figure>
<a href="#">
<img src="https://via.placeholder.com/150"
alt="Elephant at sunset"></a>
<figcaption>An elephant at sunset</figcaption>
</figure>
<figure>
<a href="#">
<img src="https://via.placeholder.com/150"
alt="Elephant at sunset"></a>
<figcaption>An elephant at sunset</figcaption>
</figure>
<figure>
<a href="#">
<img src="https://via.placeholder.com/150"
alt="Elephant at sunset"></a>
<figcaption>An elephant at sunset</figcaption>
</figure>
<figure>
<a href="#">
<img src="https://via.placeholder.com/150"
alt="Elephant at sunset"></a>
<figcaption>An elephant at sunset</figcaption>
</figure>
</div>

Answer 3

Add one div for basename and try to apply this css into it.
.basename {
top: 90%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
}
<div class="basename"><?=basename($image_path)?></div>