HTML: multiple images with text under each

Question

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.

Does this answer your question? [CSS-only masonry layout](https://stackoverflow.com/questions/44377343/css-only-masonry-layout) — Alan H., Jun 02 '22 at 16:52
There are many ways to solve this, but generally speaking you will want to wrap each img-figcaption pair in a containing element (e.g. a div), and then apply some layout technique, such as 'masonry', 'flex-box', or even simple "display: inline-block" to those containers — Alan H., Jun 02 '22 at 16:53

Nik · Accepted Answer · 2022-06-02T18:02:56.887

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

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

Here are the CSS properties

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

HTML: multiple images with text under each

1 Answers1