Matching Figures to their Descriptions

I am currently working on a website and looking to include images with captions that display the price of each item underneath. The issue I'm facing is that the captions are aligning horizontally instead of vertically. Can anyone provide assistance with this?

Below is my HTML and CSS code:

FIDDLE

HTML CODE

<div class="wrapper">
    <div class="top">
        <!--Background set in CSS-->
    </div><!--  end of top-->

    <div class="menu">
        <h1>Rosy's Jewellery</h1>                   
        <ul id="nav">       
            <li><a href="index.html">Home           </a></li>
            <li><a href="Bracelets.html">Jewellery  </a></li>
            <li><a href="Locations.html">Locations  </a></li>
            <li><a href="ContactUs.html">Contact Us </a></li>
            <li><a href="Reviews.html">Reviews      </a></li>
        </ul>       
    </div><!-- end of menu -->

    <div class="main2">
        <H1>Jewellery</H1>
        <ul id="nav2">
            <li><a href="Bracelets.html">Bracelets  </a></li>
            <li><a href="Necklaces.html">Necklaces </a></li>
            <li><a href="Earrings.html">Earrings </a></li>
        </ul>
    
        <div class ="figures">
            <FIGURE>
                <img src="Images/Jewellery2.png">
                <FIGCAPTION>Jewellery.</FIGCAPTION>
            </FIGURE>

            <FIGURE>
                <img src="Images/Jewellery3.png">
                <FIGCAPTION>Jewellery.</FIGCAPTION>
            </FIGURE>

            // Remaining image figures go here
        </div>
    </div><!--close main-->

    <div class="footer">
        <ul id="footer">
            <li> <img src="Images/facebook.png" /> 
            <img src="Images/twitter.png" />  </li>
            <li> Twitter</li>
            <li> Address </li>      
            <li> Tel</li>
        </ul>
    </div> <!--end of footer-->
</div>

CSS CODE

.wrapper {
    margin:0 auto;
    background-color:#D1CED4;
}   

.top {
    background-color:#000000;
    padding-bottom:2.5em;
}

// Remaining CSS styles come here

Answer №2

To improve the layout, consider inserting the following CSS code:

figure img {
       display:inline-block;
        vertical-align: middle;

            }
figure figcaption {
           display:inline-block;
    vertical-align: middle;
}

JSFiddle link

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

A guide on embedding text onto the bottom of an image in Material-UI GridList using Reactjs

I'm currently developing a Mern-stack application and using Material-UI for the frontend. My GridList is functioning correctly, but I want to position my description text at the bottom of the image rather than in front of it. However, when I try to a ...

The height of the parent div increases as its children grow when the browser is resized

I have a set of three divs aligned horizontally within a parent div. As the browser width changes, one of the child divs wraps under the other two when the width is reduced, transitioning them to a vertical alignment. Here are some visual examples: View i ...

Increase the margin for the following item if it has a specific class using CSS

Here is the HTML code that I currently have: <div class="post"> <h2 class="title">TITLE: Kausalya</h2> <p class="content">CONTENT: Shaunaka Shakha</p> </div> <div class="post"> <h2 class="title"> ...

Accessing video durations in Angular 2

Can anyone help me with retrieving the video duration from a list of videos displayed in a table? I attempted to access it using @ViewChildren and succeeded until encountering one obstacle. Although I was able to obtain the query list, when attempting to a ...

Activate single elements one at a time

If you want to understand the question better, take a look at my code on jsfiddle. Each Div contains only one link. When you click on the link, it sets the Div to active and shows a hidden Div within it. Clicking the link again toggles the active style an ...

Modifications to the toolbar styling are made by the Angular Material mat-form-field

Having some trouble creating an input field in my component alongside a mat-toolbar element. When I try to insert a mat-form-field, it ends up messing with the styling of the mat-toolbar. I've been unable to pinpoint exactly where the issue lies (if ...

Scroll automatically to the following div after a brief break

On my website, the title of each page fills the entire screen before the content appears when you scroll down. I am interested in adding a smooth automatic scroll feature that will transition to the next section after about half a second on the initial "ti ...

Is there a way to transform an HTML table from a horizontal layout to a vertical

I have reorganized the bus seating layout horizontally using a table. However, I now need to transform it vertically for mobile phones without disrupting my existing code. My attempt at using transform(rotate90deg) achieved the desired result, but the tab ...

Site with Three Steady Columns

While I know that this question has been asked in the past, I'm eager to see if there have been any recent changes. I am currently searching for a fixed 3 column layout using html/css, with the main content (middle) area being located first in the DO ...

Deciphering the Mysteries of HTTP Headers

I have been using various applications to evaluate the quality of my websites, and many of the improvements suggested relate to missing http headers. Some examples include Content-Security-Policy, Charset, etc... I decided to visit the Wikipedia page on ...

Click the button in Javascript to add new content

I am currently experimenting with JavaScript to dynamically add new content upon clicking a button. Although I have successfully implemented the JavaScript code to work when the button is clicked once, I would like it to produce a new 'hello world&ap ...

Adjusting variables in Bootstrap using the app.scss file is a helpful customization technique for

As I work on a template that will be utilized by various individuals across different projects, ensuring it functions seamlessly without the need for project-specific modifications is paramount. In this particular case, my goal is to modify the $spacer va ...

When a page is being redirected using requestdispatcher in a filter, the CSS contents do not seem to be applying correctly

Upon evaluation of the condition, if it fails, I am utilizing a request dispatcher to redirect to another page. The redirection is successful, however, the CSS is not being applied to the new page. What could be causing this issue? public class RolePrivil ...

Modify the stroke attribute of the <path> element using CSS

I have a generated svg path code that I want to customize using CSS to remove the default stroke. How can I override the stroke property and set it to none? code: <div class="container" style="position: absolute; left: 3px; z-index: 1;"> <svg he ...

What is the best way to pass card data between Vue.js components?

My application consists of two components: DisplayNotes.vue, which displays data in card format retrieved from the backend, and UpdateNotes.vue, which allows users to update existing data by opening a popup. The issue I'm facing is that when a user cl ...

Stop automatic resizing on mobile device after postback

Encountered an issue with a website I'm currently developing. It's not causing any problems, but I want to enhance the user experience. My aim is to maintain the zoom levels of mobile devices after a postback. To provide more context, there is a ...

Step by step guide to creating individual counter sections

I have set up a counter section where the numbers go from 0 to a specific value. However, currently all three counters start counting simultaneously. Is there a way for the first counter to count up first, then once it's done, move on to the second c ...

Is it recommended for the browser to download multiple images when utilizing srcset?

Here is my HTML markup: <img srcset="https://unique.cloudinary.com/xxx/image/upload/c_scale,w_300/v1653408278/notforsquares/ll/DSCF4429.jpg 300w, https://unique.cloudinary.com/makingthings/image/upload/c_scale,w_600/v1653408278/notforsquares/ll ...

Is there a way to override a LESS variable inside a mixin?

Currently, I am incorporating LESS into one of my projects and I have a requirement to establish different color schemes for various users. The project involves developing a portal where the color scheme should change based on the type of user logging in. ...

<dt> and <dd> have not been added after the previous element

I can't seem to figure out why the dt and dd elements are not being added to the dl I created. Here's my initial attempt: // Dictionary list var words = [ { term: "Procrastination", definition: "Pathological tendency to s ...