Align text underneath images in css - css

Question

I'd like to make some sort of a program page for a festival. I want to create a list of images with little text underneath. I don't succeed in placing the text underneath (it always ends up next to the images instead of underneath). Can somebody help?
It should look like this:
[img1] [img2] [img3]
[text1] [text2] [text3]
[img4] [img5]
[text4] [text5]
... and so on
The size of the images is fixed, so that the rows with only 2 images are the same size as those who have 3.
This is my code in CSS thus far:
For the texts (small and big):
.prog_big{width:321px; height:434px; margin-left:30px; font-family: Lucida Sans,Calibri; font-size:16px; float:left; text-align:center}
.prog_small{width:207px; height:283px; margin-left:30px; font-family: Lucida Sans,Calibri; font-size:16px; float:left;text-align:center}
For the images (small and big):
.poster_big{width:321px; height:434px; margin-left:30px; float:left}
.poster_small{width:207px; height:283px; margin-left:30px; float:left}

Answer 1

I don't this this is a css issue really. You can achieve this in HTML with this type of layout
<figure>
<img src="your_Image">
<figcaption>text here</figcaption>
</figure>

Answer 2

Division and image tags are not inline element. Because of this reason they will create a new line in the screen for each of them.
Make them inline, using the css "display:inline-block". They will stand side by side.
div.first-row div, div.second-row div {
display:inline-block;
float:left;
width:100%;
}
div.first-row div {
width: 33.3%;
}
div.second-row div {
width: 50%;
}
div img {
width:100%;
height:auto;
}
p {
text-align:center;
}
<div class='first-row'>
<div>
<img src='http://via.placeholder.com/140?text=image'>
<p>Some Text Here</p>
</div>
<div>
<img src='http://via.placeholder.com/140?text=image'>
<p>Some Text Here</p>
</div>
<div>
<img src='http://via.placeholder.com/140?text=image'>
<p>Some Text Here</p>
</div>
</div>
<div class='second-row'>
<div>
<img src='http://via.placeholder.com/140?text=image'>
<p>Some Text Here</p>
</div>
<div>
<img src='http://via.placeholder.com/140?text=image'>
<p>Some Text Here</p>
</div>
</div>

Answer 3

A flexbox solution:
.row {
display: flex;
flex-flow: row;
justify-content: flex-start;
}
.column {
display: flex;
flex-flow: column;
justify-content: flex-start;
margin-right: 10px;
}
p {
width: 100%;
text-align: center;
}
<div class="row">
<div class="column">
<img src="http://placehold.it/100" />
<p>Text 1</p>
</div>
<div class="column">
<img src="http://placehold.it/100" />
<p>Text 2</p>
</div>
</div>
<div class="row">
<div class="column">
<img src="http://placehold.it/60" />
<p>Text 3</p>
</div>
<div class="column">
<img src="http://placehold.it/60" />
<p>Text 4</p>
</div>
<div class="column">
<img src="http://placehold.it/60" />
<p>Text 5</p>
</div>
</div>