adding text below image in a list in HTML

StackOverflow https://stackoverflow.com/questions/21647924

  •  08-10-2022
  •  | 
  •  

Pregunta

Here is what I want to do: I want to have a few images in a list and I want to have text below each image and very close to each image.

I have tried to use <figure> and <figcaption> but it messes things up.

Here is my list in the 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>

And here is what I get:

enter image description here

And this is what I want:

enter image description here

I appreciate any help on this.

UPDATE1: After applying the suggestion in one of the answers as adding this to css:

img { display: block; }

I got this:

enter image description here

¿Fue útil?

Solución

Given the altered 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>

I'd suggest the CSS:

img {
    display: block;
}

JS Fiddle demo.

With regard to the question asked by the OP, in the comments (below):

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

The answer is, of course, 'yes,' simply assign a margin-bottom to the <li> elements, for example:

li {
    margin-bottom: 2em;
}

JS Fiddle demo.

Or, if you'd rather, padding-bottom could be used instead:

li {
    padding-bottom: 2em;
}

JS Fiddle demo.

Otros consejos

Maybe a table? try this.

<html>
<head>
<body>
<div class="verticalStrip">
    <br>
    <table>
        <tr><td><img src="image1.png" alt="im1"/><br/>text1</td></tr>

        <tr><td><img src="image2.png" alt="im2"/><br/>text2</td> </tr>
    </table>
</div>    
</body>
</html>
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top