Put different paragraphs under 3 images in html5,using a class - html

Question

I have 3 images
HTML:
<img src="cal.png" alt = "calendar" class="info">
<img src="location.png" alt = "location" class="info">
<img src="time.png" alt = "clock" class="info">
CSS:
.info{
height: 15%;
align-content: center;
padding-left: 20%;
}
Now, I want to add text under the 3 images, the text should be centered. It will be 3 different . The 3 images should be on one line.

Answer 1

Please try this code:
Html:
<div class="div-test">
<img src="invoice_logo.png" alt = "calendar" class="info">
<div >YOUR TEXT</div>
</div>
css:
.info{
height: 15%;
align-content: center;
}
.div-test{text-align:center;}
.div-test > span {clear:both;}
From your class remove margin left.If not required then.

Answer 2

You can use the figcaption tag, which is meant for this exact purpose:
div figure {
display: inline-block;
}
.info {
height: 15%;
text-align: center;
}
<div>
<figure>
<img src="http://via.placeholder.com/150x150" alt="calendar" class="info">
<figcaption class="info">Info about image one.</figcaption>
</figure>
<figure>
<img src="http://via.placeholder.com/150x150" alt="location" class="info">
<figcaption class="info">Info about image two.</figcaption>
</figure>
<figure>
<img src="http://via.placeholder.com/150x150" alt="clock" class="info">
<figcaption class="info">Info about image three.</figcaption>
</figure>
</div>

Answer 3

Your HTML:
<div class="img-with-text">
<img src="yourimage.png" alt="sometext" />
<p>Some text</p>
</div>
Your CSS:
.img-with-text {
text-align: justify;
width: [width of img];
}
.img-with-text img {
display: block;
margin: 0 auto;
}
https://stackoverflow.com/a/1225242/6441416
https://stackoverflow.com/users/7173/jason