Struggling to align images side by side using HTML and CSS along with figcaption and buttons

Adding buttons below images on my webpage is proving to be a bit challenging. I tried using the figcaption tag, but it resulted in the images stacking on top of each other instead of side by side.

**My HTML:**

    <section class="mostpurch">    
  <h1> Latest PC downloads... </h1>
    <p> Most purchased on PC </p>
    <img src="images/fallout-4.jpg" class="f41" />
    <figcaption><button type="button">Add to basket</button></figcaption>
    <img src="images/Tom-Clancys-The-Division.jpg" class="tctd1" />
    <figcaption><button type="button">Add to basket</button></figcaption>
    <img src="images/blops3.jpg" class="blops31" />
    <figcaption><button type="button">Add to basket</button></figcaption>
    <img src="images/acsyn.jpg" class="acsyn1" />
    <figcaption><button type="button">Add to basket</button></figcaption> 
  </section>

I'm looking for guidance on how to adjust my HTML or CSS to achieve the desired layout. Here's how it currently looks (image).

I want the images to be displayed next to each other with buttons underneath. If there's a better way to accomplish this, please advise as I am new to web development.

Thank you in advance,

-Jack

javascripthtmlcss

Answer №1

html

<section class="mostpurch">
  <h1> Brand new PC game releases... </h1>
    <p> Top picks on PC </p>
    <div>
      <img src="images/fallout-4.jpg" class="f41" />
      <figcaption><button type="button">Buy Now</button></figcaption>
    </div>  
</section>

css

div{display: inline;}

Answer №2

To properly structure your code, place each <img> and <figcaption> within a containing div and apply CSS to the container using this rule: display: inline-block

Check out this example on JSFiddle

.container {
  display: inline-block;
}
<section class="mostpurch">
  <h1> Latest PC downloads... </h1>
  <p>Most purchased on PC</p>
  <div class="container">
    <img src="https://www.gravatar.com/avatar/10cd84d9efcfd5b5d800bcd92694a5a3?s=32&d=identicon&r=PG&f=1" class="f41" />
    <figcaption>
      <button type="button">Add to basket</button>
    </figcaption>
  </div>
  <div class="container">
    <img src="https://www.gravatar.com/avatar/10cd84d9efcfd5b5d800bcd92694a5a3?s=32&d=identicon&r=PG&f=1" class="f41" />
    <figcaption>
      <button type="button">Add to basket</button>
    </figcaption>
  </div>
  <div class="container">
    <img src="https://www.gravatar.com/avatar/10cd84d9efcfd5b5d800bcd92694a5a3?s=32&d=identicon&r=PG&f=1" class="f41" />
    <figcaption>
      <button type="button">Add to basket</button>
    </figcaption>
  </div>
  <div class="container">
    <img src="https://www.gravatar.com/avatar/10cd84d9efcfd5b5d800bcd92694a5a3?s=32&d=identicon&r=PG&f=1" class="f41" />
    <figcaption>
      <button type="button">Add to basket</button>
    </figcaption>
  </div>
</section>

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

Performing a PHP Curl request and an ajax query to an ASP.NET page

I am attempting to send an ajax query to an ASP.NET page. Here is the algorithm I am following: 1. There is a form on my webpage; 2. When the user fills in all the fields, they click the submit button; 3. Upon clicking the submit button, JavaScript sends ...

phpjavascriptasp.netajaxcurl

Guide to incorporating crispy forms with Bootstrap 4 in Django

I'm struggling to integrate a bootstrap upload form with a Django form using crispy forms. Does anyone know how to incorporate crispy forms into a bootstrap form? This is an example of a Django crispy form: <form method="post" en ...

pythonhtmldjangobootstrap-4django-crispy-forms

Tips for retrieving JSON data from an AJAX call and displaying it pre-filled in an input field

Here is the code snippet I used to receive a response in JSON format, but when I try to display the response using alert(response.Subject);, it shows as "undefined". HTML: <input type="text" id="subject" value='Subject'> Javascript: $.a ...

javascriptjqueryhtmlajaxjson

Learn how to integrate ES6 features into your nodejs/expressjs application using either Gulp or Webpack

I am looking to incorporate ES6 features into my nodejs/expressjs application. Currently, I am using Gulp for JavaScript compilation and setting up live reload. What steps do I need to take in order to compile the es6 code to standard js within my exis ...

javascriptnode.jsgulpecmascript-6webpack

Managing several instances of NgbPagination on a single webpage

I am facing a challenge with having multiple NgbPagination components on a single page. For more information, please visit: Initially, I attempted to use ids but encountered an issue where changing one value in the first pagination affected both tables. ...

htmlcssangularpaginationng-bootstrap

Challenges arise when transferring data retrieved from a table into a bootstrap modal window

I have been attempting to transfer values from a table into a modal. Initially, I successfully displayed the <td> values in an alert when a button was clicked on a specific row. Now, I am aiming to take it a step further by having these <td> va ...

javascriptjqueryhtmlbootstrap-4

Is it possible to call a ref from a different component in React?

I'm currently working on a React chat application and I want the input field where messages are entered to be focused every time you click on the chat box. However, the challenge I'm facing is that the chat box in the main component is separate ...

javascriptreactjs

How can we stop the navigation submenus (ULs) from appearing as if they are floating?

I've created a navigation bar with an unordered list consisting of smaller unordered lists, each with the class "subnav". When the screen is small, the navigation collapses and the menus stack on top of each other. I want the navigation to maintain i ...

htmlcssnavigationpositionhtml-lists

What methods can be utilized to ensure that my wistia video player/playlist is responsive on different devices

I need some assistance with making my Wistia player responsive while using a playlist. I want the video player to adjust its size based on the screen size. Here is an example: My current code utilizes their iframe implementation: <div id="wistia_1n649 ...

javascriptjquerycsshtml5-videovideo-player

I'm having trouble getting the npm install for classnames to work within my li tag

I need some help with React JS. I'm attempting to merge my classes using the npm package called classnames. https://www.npmjs.com/package/classnames However, I'm encountering an issue: classnames doesn't seem to be working as expecte ...

javascriptjqueryhtmlreactjsredux

Accessing information from Next.js API endpoint in a Next.js web application

Currently, I am in the process of developing a web application using Next.js APP Router for both the frontend and backend components. The frontend takes care of rendering the user interface, while the backend comprises API routes. I require some guidance o ...

javascriptnext.jsvercelnext.js13

Is there a way to customize Angular's number filter?

I'm trying to achieve a consistent number format with Angular's number filter, regardless of the localization selected. After inspecting the Angular source code on GitHub, I found the implementation of the filter to be like this: function number ...

javascriptangularjsangular-filters

Tips for running a React custom hook selectively or within a specific function

I have created a unique custom hook to handle user redirection to the edit page. While on the index page, users can duplicate and delete items. The issue arises when deleting an item triggers the custom hook to redirect back to the edit page. I am looking ...

javascriptreactjsreact-hooksnext.js

When working with Node.js, it is important to properly export your Oracle database connection to avoid encountering an error like "TypeError: Cannot read property 'execute

Hey there, I am a newbie when it comes to Node.js and Oracle. I've managed to create an app and establish a successful connection to the database. Now, I'm trying to figure out how to utilize the connection object throughout my application. Any s ...

javascriptnode.jsoracleexpressnode-modules

When trying to access the same path, useEffect does not trigger

I integrated the API to execute when the screen is loaded using useEffect in Next.js v10. The code implementation is straightforward: ... const fetchAPI = async () => { try { await axios.get({ .... }) } catch (e) { console.error(e) } } R ...

javascriptreactjsnext.js

As you scroll, this smooth marquee effect gently shimmers with each movement

I've been trying out this code to create a scrolling marquee text, but the issue is that after 7000 milliseconds it starts to jitter, which doesn't make the text look good. Any suggestions on how I can fix this problem? Let me know! <script ...

javascriptjqueryhtmlmarquee

Ways to stop values from being turned into strings in javascript?

let str; let displayedNum; for (let i in imgURLArray){ str = "<li photonum="+i+">" + "<a>"+ (1+i) + "</a>" + "</li>"; $("ul.selection-list").append(str); } While looping through, I encountered an issue wher ...

javascript

Failed to load JSON data from the factory

Recently, I started learning AngularJS and have been struggling to fetch JSON data from a factory. The error message I keep getting is not very helpful: TypeError: Cannot read property '1' of null This is the module I am working with: var app ...

javascriptjsonangularjsangularjs-service

The use of callbacks is ineffective in addressing the asynchronous nature of

Hello everyone, I'm currently working on a weather app and I'm facing an issue with the asynchronous behavior of useState. I've come across some suggestions on Stack Overflow that using a callback in the useState function might solve the pro ...

javascriptreactjsreact-hooks

Managing multiple sets of data in a structured form similar to an array

How Do I Send Form Data as an Array? Take a look at the code snippet below. I'm having trouble setting the index in product_attribute['index must be here']['key'] <tr v-for="index in attributes"> <td class="text-left ...

javascripthtmlvue.jsvuejs2vue-component