HTML: multiple images with text under each-CodePudding

I would like to use HTML to display multiple images in rows and columns with text under each one.

I can display images in rows and columns, but with no text, like this:

<img src="img1.png">
<img src="img2.png">

This automatically arranges as many images in a row as will fit in the browser window, which is the behavior I want.

I've found various suggestions for placing text under images, but the ones I've tried don't display the images in rows and columns. For example:

<img src="img1.png"> <figcaption> "caption 1" </figcaption>
<img src="img2.png"> <figcaption> "caption 2" </figcaption>

This displays one image per row, instead of next to each other like I want.

CodePudding user response：

As figcaption is a block element so it makes the next element go in the next block.

    <div >
        <img src="img1.png">
        <figcaption> "caption 1" </figcaption>
    </div>
    <div >
        <img src="img2.png">
        <figcaption> "caption 1" </figcaption>
    </div>
    <div > 
        <img src="img3.png">
        <figcaption> "caption 1" </figcaption>
    </div>

Here are the CSS properties

<style>
    .image-wrapper{
        display: inline-block;
        text-align: center;
    }
</style>