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

Tips for maintaining wallet connectivity through page refresh with UseEffect

I am working on a function that utilizes the UseEffect to maintain wallet connectivity even when the page is refreshed. Here is the code snippet for my NavBar component: const NavBar = ({ accounts, setAccounts }) => { const isConnected = Boolean(acc ...

javascriptreactjsethereumuse-effect

Angular Leaflet area selection feature

Having an issue with the leaflet-area-select plugin in my Angular9 project. Whenever I try to call this.map.selectArea, VSCode gives me an error saying that property 'selectArea' does not exist on type 'Map'. How can I resolve this? I& ...

javascriptangulartypescriptleaflet

Set up an event listener for when geolocation permission is approved

My Setup: I've written some basic code snippet below: const onSuccess = () => { console.log('success'); } const onError = () => { console.log('error'); } navigator.geolocation.getCurrentPosition(onSuccess, onError) ...

javascriptreactjstypescriptgeolocation

Storing filtered data objects for future use

Introduction to my User Administration Page Currently, I am working on the User Administration page of my project and facing a minor issue. The page includes a table that displays material-ui's Usercard for each user in the system. These cards are ge ...

javascriptreactjsreduxmaterial-ui

Having trouble with sending information to the PHP server, unable to determine the root cause

Can someone help me figure out why the data from a form being sent to a php script for sending an email isn't working correctly? It's part of a template code but I suspect there might be an error. Specifically, I believe the {'userName' ...

phpjavascripthtmlemail

Activate the timepicker in Bootstrap when the user clicks on the input field

Struggling to implement a timepicker feature? Look no further than this resource. After adding the necessary js and css to your project, you may encounter issues with the popup not appearing when clicked. The code provided offers a TextBox control with s ...

javascriptjquerycsstwitter-bootstraptimepicker

Choosing a single random key-value pair from a specific attribute within a JSON schema

Is there a way to generate a new JSON schema based on the existing one, but with only one key-value pair chosen randomly from the "properties" attribute? The new schema should retain the "title" and "type" attributes as well. { "title": "animals object" ...

javascriptjson

Filtering data from Arduino using web serial communication

My setup consists of an Arduino kit connected to a webserial API that sends data to an HTML div identified by the id 'target'. Currently, all the data is being logged into one stream despite having multiple dials and switches on the Arduino. Th ...

javascripthtmlarduino

Error in MEAN CRUD operation cannot be determined

{ text: undefined, done: false, _id: 529e16025f5222dc36000002, __v: 0 } PUT /api/todos/529e16025f5222dc36000002 200 142ms - 68b Encountering an issue while updating my CRUD todo list. Despite receiving a successful status code of 200 after submittin ...

javascriptnode.jsmongodbangularjscrud

Tips for verifying the presence of a Firestore Document reference within a JavaScript array of Document references

I am currently dealing with a document that contains an array field storing references to other documents. Upon fetching the document data and verifying if a document reference exists within the array, I consistently receive a result indicating that it is ...

javascriptarraysfirebasegoogle-cloud-firestore

Determining the Nearest Form to an Element using jQuery

I developed a JavaScript/jQuery script that allows me to check all checkboxes within a form. The function works effectively, but the issue is that it checks all checkboxes on the page regardless of their form wrapper. Here is the function: function toggl ...

javascriptjqueryhtmlcheckbox

Encountering a 500 error while trying to access a different file using the .get()

My current project involves setting up basic Express routing. However, every time I try to fetch data in order to link to a new page on my website, I encounter a 500 error. The main file managing the routing is Index.js. The content of Index.js: var expr ...

javascriptnode.jsexpresshandlebars.js

"During the testing phase, the req.body object is found

I'm currently performing unit testing on my express application using Mocha and Chai. However, when I attempt to use req.body in the test file to parse the object, I only receive undefined in the testing results. In my server (app.js), I have alread ...

javascriptnode.jsexpressmocha.jschai

Use HTML to showcase an image that dynamically changes based on the outcome of a query function

Hello there, I hope my inquiry is clear enough. I apologize for reaching out as I am unsure where to begin and what exactly I should be focusing on. Currently, I have an image displayed in an HTML page like this: <div id="tag_sunrise_sunset"><p ...

javascripthtmlcssajax

Issue with Flask-Cors in Nuxt with Flask and JWT authentication implementation

I have exhausted all the available solutions to my issue, but I still can't seem to pinpoint the problem. Despite trying every solution out there, nothing seems to be of any help. Every time I make a request, the browser blocks it due to CORS Policy ...

javascriptpythonflaskjwtcors

Efficiently Loading AJAX URLs using jQuery in Firefox

setInterval(function(){ if(current_url == ''){ window.location.hash = '#!/home'; current_url = window.location.hash.href; } else if(current_url !== window.location){ change_page(window.location.hash.split('#!/&apo ...

javascriptjqueryajaxhashsetinterval

Analyzing the browser's address bar and creating a navigation link derived from it

Is there a way to create a script that can extract information from the address bar? For example, if we have a link like this: We want to be able to take the "page-2011" part and dynamically generate navigation links like this: « <a href="/page-2010 ...

javascriptjqueryhtmlcss

In JavaScript, use the following code to replace "(" with "(":

Is there a way to dynamically transform the string "Test(5)" into "Test\(5\)" using JQuery or Javascript? I attempted this approach, but it did not work as expected var str = "Test(5)"; str = str.replace("(","\("); str = str.replace(")"," ...

javascriptjquerystringreplace

Firebase authentication encountered an error due to a network request failure

Utilizing firebase Hosting to host my website, I am encountering a persistent error when attempting to login using email/password. This is the JavaScript code that I am using: window.onload = () => initApp(); //Initialize screen function initApp(){ ...

javascripthtmlfirebasefirebase-authentication

Using ng-transclude directive allows for encapsulating HTML content within an ng-transclude element

My directive includes an ng-repeat in the template and also has an ng-transclude option after the repeater to allow users to input their own content. The issue arises when the custom content is surrounded by an ng-transclude element upon rendering, which i ...

javascriptangularjs