Show a message using <li> tags that include <img> elements

I've been working on figuring out how to position text above or below an image like this:

However, I'm facing an issue where only the images are being displayed (as shown in the example):

I can't use the code from W3schools directly because my thumbnails expand and switch to a responsive carousel when clicked. I just want the name to show up alongside the thumbnails. Unfortunately, I can't share my code here, so I've attached an image showing my li> tags instead:

<div class="container">
    <ul id="myGallery">
        <li><img src="link.png" /></li>
        <li><img src="link.png" /></li>
        <li><img src="link.png" /></li>
        <li><img src="link.png" /></li>
        <li><img src="link.png" /></li>
    </ul>
</div>
csshtmlimagehtml-lists

Answer №1

You can achieve this easily using the flex property.

Here is an example:

ul {
 list-style: none;
 display: flex;
 flex-wrap: wrap;
}

ul li {
  margin: 0 5px 5px 0;
  text-align: center;
  border: 1px solid #000;
}
<div class="container">
  <ul id="myGallery">
    <li>
      <img src="http://lorempixel.com/100/100/nature/1/" width="100px" height="100px" />
      <p>First image</p>
    </li>
    <li>
      <img src="http://lorempixel.com/100/100/nature/2/" width="100px" height="100px" />
      <p>Second image</p>
    </li>
    <li>
      <img src="http://lorempixel.com/100/100/nature/1/" width="100px" height="100px" />
      <p>Third image</p>
    </li>
    <li>
      <img src="http://lorempixel.com/100/100/nature/2/" width="100px" height="100px" />
      <p>Fourth image</p>
    </li>
  </ul>
</div>

Another approach is to use the figure element.

Here is an example:

/*figure approach*/

.figures {
  display: flex;
  flex-wrap: wrap;
}

figure {
  margin: 0;
  margin-right: 5px;
  text-align: center;
  border: 1px solid #000;
}
<div class="figures">
  <figure>
    <img src="http://lorempixel.com/100/100/nature/1/" width="100px" height="100px" />
    <figcaption>First image</figcaption>
  </figure>
  <figure>
    <img src="http://lorempixel.com/100/100/nature/2/" width="100px" height="100px" />
    <figcaption>Second image</figcaption>
  </figure>
  <figure>
    <img src="http://lorempixel.com/100/100/nature/1/" width="100px" height="100px" />
    <figcaption>Third image</figcaption>
  </figure>
  <figure>
    <img src="http://lorempixel.com/100/100/nature/2/" width="100px" height="100px" />
    <figcaption>Fourth image</figcaption>
  </figure>
</div>

Updates

Check out the problem on jsfiddle - https://jsfiddle.net/raw9b1fj/2

Find the solution on jsfiddle - https://jsfiddle.net/raw9b1fj/4/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Images that dynamically adjust to different screen sizes with captions that are perfectly

For a while now, I have been utilizing <picture> to display images with more design control. I typically use CSS to show or hide specific images within the <div> block. However, I am now considering using <figure> with <figcaption> ...

cssresponsive

Tips for ensuring the final row remains fixed at the bottom of the table while maintaining a minimal body height:

I'm currently working on designing an invoice table using HTML and CSS. I have dynamic rows that are added to the table, and I want the body of the table to have a minimum height to fit around 5-6 rows, after which it should extend based on the number ...

htmlcssbootstrap-5

creating an HTML document with 2 interactive elements

In my app.js file, I have defined routes using Angular and included references to HTML files. However, when I run the file, it only displays two controls instead of what is expected. Below is a snippet from my login.html file: ![<!DOCTYPE html> < ...

htmlangularjsforms

In PHP, echo only a single item from the array when the page loads, and refrain from echoing if the

With PHP, I have an array of values. Is it possible to echo a value when a user first reloads the page, but not output the same value if the page is reloaded again? foreach($_SESSION['arrayFolders'] as $value){ if (in_array($_SESSION['ar ...

phphtml

Increasing the size of an SVG using CSS beyond 100% dimensions

Is there a way to enlarge an SVG using CSS that exceeds 100% of the original image size? I am currently displaying the SVG in an img tag and have removed the height and width attributes from the SVG file. I have attempted to adjust the height and width u ...

htmlcsssvgscalingstyling

Organizing Angularjs ng-repeat based on date

I am still learning AngularJS and could use some assistance. In my application, I have a table with the following information <table> <tr> <th><span ng-click="sortType = 'first_name'; sortReverse = !sortReverse">Refer ...

pythonhtmlangularjssorting

Applying Tailwind styles to dynamically inserted child nodes within a parent div

Currently, I am in the process of transitioning my website stacktips.com from using Bootstrap to Tailwind CSS. While initially, it seemed like a simple task and I was able to replace all the static HTML with tailwind classes successfully. However, now I ha ...

javascriptcsstailwind-csstailwind-elements

What is the method to retrieve the file path for the ImageIcon?

After creating an ImageIcon using the following code: ImageIcon ico =new ImageIcon("tree.png"); Is there a way to retrieve the path as a string? String path = ico.getPath(); ...

javaimagepathgeticons

Utilize CSS in your HTML using Express framework

I am attempting to link a css stylesheet to my basic html webpage. I am utilizing parse.com hosting for dynamic webpages that utilize express. There are numerous responses to this question, but none of them have proven successful in my case. I am trying ...

javascripthtmlcssnode.jsexpress

Create functionality for editing and reviewing content within an HTML webpage

Looking to add edit and review modes to my webpage. In edit mode, users can drag and drop divs to different locations or resize them. Once changes are made, users may want to review their work. I have included a link for the user to switch to review mode ...

javascriptjqueryhtmldrag-and-dropresize

I am puzzled as to why I keep receiving the error message "Cannot read property 'poPanel' of undefined"

CSS In my project, I am implementing a feature that displays an ordered list by looping through an array of objects and adding them on a button click. It works smoothly for adding items, but when I try to implement a remove function to delete each item, I ...

htmltypescriptangular8

The process of eliminating body padding in Nuxt.js

I'm considering building a website using Nuxt.js because I've heard it's both cool and user-friendly. While I do have some knowledge of vue.js, I'm stuck on a particular issue: How can I remove the padding from the body? I understand ...

javascripthtmlcssnuxt.js

Tips for Embedding React into a Specific ID using Hooks on an HTML Document

I am currently diving into the world of React hooks. While I understand class components, Hooks seem to be missing a specific render section. When adding React to a webpage (without using CREATE REACT APP), how do I specify where my hook should run on the ...

javascripthtmlreactjsreact-hooks

Transform to CSS Selector

Having trouble clicking on the image button below using Xpath? Here is the HTML tag for the Image Button: HTML Script <img src="../../../../imagepool/transparent%21tmlservicedesk?cid=1" id="reg_img_304316340" aralttxt="1" artxt="Show Application ...

htmlseleniumselenium-webdrivercss-selectors

JQuery Ajax: Issue with updating Total Likes for posts when Like button is clicked

There are two JQuery Ajax calls in this scenario. The first call retrieves user messages from MySQL, along with the number of likes for each message and a button for users to like the message. This initial request is functioning correctly. The second Ajax ...

jqueryhtmljsonajax

"Customizing the Material-ui TextField DOM Element: A Step-by-Step

After trying the code below, I was expecting to see a yellowish "Hi," but instead received [object Object]. Is there a way to correct this issue? Possibly utilizing InputProps would help, but I haven't been able to locate a comprehensive tutorial on ...

javascripthtmlcssreactjsmaterial-ui

CSS/HTML: A guide to creating an element that switches to absolute positioning when scrolled past

Just starting out with CSS and HTML here, trying to figure out how to make an element become absolutely positioned once you scroll past it on the page. Take a look at this example for reference: (no need for an account to test). As you scroll down, the b ...

jqueryhtmlcss

What do the different colored highlights in Sublime Text 2 indicate?

I am facing an issue with the code in a particular file: background: -moz-linear-gradient(red, orange, yellow, green, blue, indigo, violet); Interestingly, Sublime Text 2 appears to highlight the background of indigo and violet with a light blue color: ...

csscolorsbackgroundsublimetext2highlight

What is the reason that a Button's text does not adhere to CSS style rules within the container that holds the button?

Imagine having this ASP.NET/CSS snippet: <div style="color:Red;"> some text...<asp:Button runat="server" ID = "Button1" Text = "ABC" /> </div> The "some text" section is displayed in red, however, the button's text remains bla ...

asp.netcss

AngularJS field array

Is it possible to create an array that contains references to the fields in a form (such as input, textarea, etc.) and then run a function on them in my code, like addClass()? To clarify my objective - I am looking to add a red border color to any invalid ...

cssangularjs