Inserting text underneath an image within a numbered list using HTML

Question

Inserting text underneath an image within a numbered list using HTML

I am attempting to achieve a specific layout where I have images in a list with text placed directly below each image. However, my attempts using <figure> and <figcaption> have not been successful.

Below is the HTML code for my list:

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

Unfortunately, this is the result I currently have:

My desired outcome should look like this:

Any assistance on achieving this layout would be greatly appreciated.

UPDATE1: Adding the following CSS rule as suggested in one of the responses:

img { display: block; }

Resulted in the following changes:

html css list spacing

Answer 1

Answer №1

After making changes to the HTML structure:

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

Here is a suggestion for the CSS:

img {
    display: block;
}

You can view the demo on JS Fiddle here.

In response to the question from the original poster in the comments:

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

The answer is, indeed, 'yes.' You can add a margin-bottom to the <li> elements, like this:

li {
    margin-bottom: 2em;
}

Check out the modified layout on JS Fiddle here.

Alternatively, you could use padding-bottom instead:

li {
    padding-bottom: 2em;
}

See the updated design on JS Fiddle here.

Answer 2

After making changes to the HTML structure:

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

Here is a suggestion for the CSS:

img {
    display: block;
}

You can view the demo on JS Fiddle here.

In response to the question from the original poster in the comments:

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

The answer is, indeed, 'yes.' You can add a margin-bottom to the <li> elements, like this:

li {
    margin-bottom: 2em;
}

Check out the modified layout on JS Fiddle here.

Alternatively, you could use padding-bottom instead:

li {
    padding-bottom: 2em;
}

See the updated design on JS Fiddle here.

Answer 3

Answer №2

Perhaps using a table is the solution? Give this a try.

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

Answer 4

Perhaps using a table is the solution? Give this a try.

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

Inserting text underneath an image within a numbered list using HTML

Answer №1

Answer №2

Similar questions

What is the method for attaching a keypress event to an HTML document?

Is there a way to make a table stay at a specific width for screen sizes larger than 1000px, but then adjust its size accordingly as the window size decreases?

Display a DIV element when hovering over another DIV element using CSS or JavaScript without them being directly related as parent and

The jQuery UI button only functions correctly for a specific element, not any other element

Pick out grouped objects without the use of Javascript

Step-by-step guide to making a circular "clip-path" work in both Internet Explorer and Firefox

Tips for selecting a dropdown item that shares the same data-testid

Is there a way to ensure that an inner div always stretches to the full width of the browser window regardless of its parent's width configurations and size?

Creating a new variable in Python with enumerate in list comprehension

What is the best way to achieve consistent alignment in Javascript?

Unconventional arrangement of gaps for radio buttons

Using jQuery to show and hide elements on a webpage

coding with javascript and css

Implemented an HTML hyperlink element precisely positioned

My goal is to display the information retrieved from my AJAX response within my jQuery data table

Node.js express failing to load CSS files

Guide to overlaying an SVG on a PNG in an HTML document

What is the best way to prioritize .py-md-6 over .p-3 in Bootstrap 4?

Canvas Frustratingly Covers Headline

Achieve uniform height for two elements using Material UI