HTML: 多张图片，每张图片下都有文字

Question

我想使用 HTML 在行和列中显示多张图片，每张图片下方都有文字。

我可以在行和列中显示图像，但没有文本，如下所示：

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

这会自动在一行中排列尽可能多的图像以适合浏览器window，这是我想要的行为。

我发现了各种关于在图像下放置文本的建议，但我尝试过的建议并没有在行和列中显示图像。例如：

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

每行显示一张图片，而不是像我想要的那样并排显示。

Answer 1

因为 figcaption 是一个块元素，所以它使下一个元素进入下一个块。

    <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>

这是 CSS 属性

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

HTML: 多张图片，每张图片下都有文字

HTML: multiple images with text under each

html