How can I add simple text under an image? - html

Question

I am trying to put a text under every image of an album. so I've added 6 photos side by side with float left. I know that the img tag is an inline-block of default so I put a div with class text with text inside and in the CSS I assigned it "display: block" in this way I thought I would make it appear under the image .. why this does not happen? I tried also to assign to the div text... position absolute and to the container position relative but this only works for the first image ...
.conteiner {
width: 100%;
height: 50vh;
margin-top: 50px;
padding: 20px;
}
.box {
background-image: url('xxx.jpg');
background-size: cover;
border: 1px solid black;
width: calc(100% / 6 - 20px);
height: 15vh;
float: left;
margin: 10px;
background-position: center;
}
.clearfix {
content: '';
display: table;
clear: both;
.text {
display: block;
}
<div class="conteiner clearfix">
<div class="box">
</div>
<div class="text">
Recenti
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
enter image description here that's what I have
enter image description here and that's what I want to do

Answer 1

It would be much simpler to use Grid or Flexbox to get such a layout. No need for float and clear.
Using Grid:
.container {
display: grid;
grid-template-columns: repeat(6, 1fr);
width: 100%;
height: 50vh;
margin-top: 50px;
padding: 20px;
}
Then simply place the 6 images first to fill up the first row and the 6 texts second to fill up a second row.
<div class="container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="text">
Recenti
</div>
<div class="text">
Recenti
</div>
<div class="text">
Recenti
</div>
<div class="text">
Recenti
</div>
<div class="text">
Recenti
</div>
<div class="text">
Recenti
</div>
</div>
Also, the content of the grid will be sized to fill the grid area so you may not have to explicitly size the box.
.box{
background-image: url('xxx.jpg');
background-size: cover;
border: 1px solid black;
width: 100%;
height: 15vh;
background-position: center;
}

Answer 2

Try this :
https://codepen.io/the-wrong-guy/pen/xxZzBwR
.box {
display: grid;
}