html - 在 HTML 列表中的图像下方添加文本

Question

这是我想做的: 我想在列表中包含几张图片，并且我希望在每张图片下方都有文字并且非常靠近每张图片。

我试过使用 <figure>和 <figcaption>但它把事情搞砸了。

这是我在 html 中的列表:

<div class="verticalStrip">
    <br>
    <ul>
        <li><img src="image1.png" alt="im1"/></li>
        <li>text1</li>
        <li><img src="image2.png" alt="im2"/></li>
        <li>text2</li>
    </ul>
</div>    

这是我得到的:

这就是我想要的:

我很感激在这方面的任何帮助。

更新 1: 在将其中一个答案中的建议应用为将其添加到 css 之后:

图片{ 显示: block ；

我明白了:

Answer 1

给定更改后的 HTML:

<div class="verticalStrip">
    <br>
    <ul>
        <li><img src="image1.png" alt="im1"/>text1</li>
        <li><img src="image2.png" alt="im2"/>text2</li>
    </ul>
</div>    

我建议使用 CSS:

img {
    display: block;
}

JS Fiddle demo .

关于 OP 提出的问题，在评论(下方)中:

is there any way to create some spacing between text1 and image2?

答案当然是"is"，只需分配一个 margin-bottom到 <li>元素，例如:

li {
    margin-bottom: 2em;
}

JS Fiddle demo .

或者，如果您愿意，padding-bottom可以改用:

li {
    padding-bottom: 2em;
}

JS Fiddle demo .