What is the method for aligning images next to each other and on top of one another

Being new to html and css, I am currently working with 4 images that need to be arranged a certain way. My issue is that the pictures are stacking on top of each other instead of displaying as desired.

Check out this image for reference

To solve this problem, I used the following code:

<div class="image123">
  <div class="imgContainer">
    <img src="pizza.jpg" height="200" width="75%"/>
    <p>This is image 1</p>
  </div>
  <div class="imgContainer">
    <img class="middle-img" src="tacos.jpg"/ height="200" width="75%"/>
    <p>This is image 2</p>
  </div>
  <div class="imgContainer">
    <img src="philly.jpg"/ height="200" width="75%"/>
    <p>This is image 3</p>
  </div>
</div>

htmlcss

Answer №1

Give this a shot

.img-parent-box {
display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
<div class="img-parent-box">
    <div class="img-box"> <img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
        <p>This is image 1</p>
    </div>
    <div class="img-box"> <img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
        <p>This is image 2</p>
    </div>
    <div class="img-box"> <img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
        <p>This is image 3</p>
    </div>
    <div class="img-box"> <img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
        <p>This is image 4</p>
    </div>
</div>

Answer №2

Don't miss out on this!

This is image 1

This is image 2

This is image 3

This is image 4

Answer №3

One important aspect to consider is applying styling to the div containing an image with display: inline-block; and width: 50%;

Would you like to experiment with this solution:

.img-parent-box {
  font-size: 0; // using this trick to fix spacing issues
}

.img-box {
  display: inline-block;
  width: 50%;
  font-size: initial; // resetting font size for text in images
}
<div class="img-parent-box">
 <div class="img-box"> <img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
    <p>This is image 1</p>
 </div>
 <div class="img-box"> <img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
    <p>This is image 2</p>
 </div>
 <div class="img-box"> <img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
    <p>This is image 3</p>
 </div>
 <div class="img-box"> <img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
    <p>This is image 4</p>
 </div>
</div>

Answer №4

HTML layout

<div class="image-wrapper">
  <div class="row">
    <figure>
      <img src="" alt="">
      <figcaption></figcaption>
    </figure>
    ...
  </div>
  ...
</div>

.img-container is set to have display: inline-block and .row has a style of display: flex.

All in all

body {
  margin: 0;
}

.img-container {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  padding: 15px;
}

.img-container h4 {
  background: orange;
}

.img-container .row {
  display: flex;
}

.img-container figure {
  margin: 0;
}

.img-container img {
  display: block;
}

.img-container figcaption {
  background: yellow;
  margin-top: 15px;
  margin-bottom: 15px;
}
<div class="img-container">
  <h4>Favorite dishes</h4>
  <div class="row">
    <figure>
      <img src="http://placehold.it/230x230" alt="">
      <figcaption>Pizza</figcaption>
    </figure>
    <figure>
      <img src="http://placehold.it/230x230" alt="">
      <figcaption>Pizza</figcaption>
    </figure>
    <figure>
      <img src="http://placehold.it/230x230" alt="">
      <figcaption>Pizza</figcaption>
    </figure>
  </div>
  <div class="row">
    <figure>
      <img src="http://placehold.it/230x230" alt="">
      <figcaption>Pizza</figcaption>
    </figure>
    <figure>
      <img src="http://placehold.it/230x230" alt="">
      <figcaption>Pizza</figcaption>
    </figure>
    <figure>
      <img src="http://placehold.it/230x230" alt="">
      <figcaption>Pizza</figcaption>
    </figure>
  </div>
</div>

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

In the world of Angular, whitespace is simply treated as non-existent when it comes

Within the controller, I have an array structured as follows: 'Pipe': '|', 'Comma': ',', 'Tab': '\t' }; When configuring ng-options in my code, it is implemented in this manne ...

javascripthtmlangularjsng-options

I am struggling to align elements properly with Bootstrap, and I am encountering issues with the border radius of a specific div

I'm having trouble aligning all the elements in the center of my login form created with HTML and Bootstrap. The header appears to be center-aligned, but it is not vertically aligned with the other elements. I've been using the Grid system and ne ...

htmlcsstwitter-bootstrap

Issue with Internet Explorer's CSS

It appears that this page is not displaying correctly in Internet Explorer 9, along with possibly older versions as well. The issue seems to be with the right menu floating to the bottom of the page. Firefox, Chrome, and Safari are all rendering it correct ...

htmlcssinternet-explorer

Utilizing pure JavaScript to dynamically fetch HTML and JavaScript content via AJAX, unfortunately, results in the JavaScript

I am trying to load an HTML file using AJAX and then execute a script. Here is the content of the HTML file I want to load: <div class="panel panel-body"> <h4>Personal Data</h4> <hr /> <span data-bind="editable: firs ...

javascripthtmlajaxknockout.js

Guide to Making Colorful Text Inside Bootstrap 5 Tooltip

When trying to include the double quote character " in a custom HTML tooltip, it appears to cause the tooltip to malfunction. This results in the browser mistakenly treating the tooltip title as completed and interpreting a portion of the title as ext ...

javascripthtmlcssbootstrap-5web-frontend

Having trouble with jQuery Animate when trying to change the background-color property?

So, I was experimenting with the jQuery .animate() function and decided to change the background color of a div based on how many pixels the user scrolled. Surprisingly, it didn't work as expected. After switching to the .css() function instead, every ...

javascriptjquerycssjquery-animate

Limiting the number of rows in a PHPexcel array

Is there a way to prevent the repcode from being empty if a specific name (array) is empty? I'm facing this issue with my excel report. Even when I only fill out 1 row in my form, the repcode is saved from 1 row to 10. Here is the current code: < ...

phphtmlmysqlphpexcel

What is the best way to disable the click function for <a> tags that have a specific class?

I am dealing with parent navigation items that have children, and I want to prevent the parent items from being clickable. Here is an example of how they currently look: <a href="parent">Parent Item</a> Is there a way to select the <a> ...

javascriptjquerycssanchor

What is the best way to detect when I switch to a different tab than a specified tab using HTML and jQuery?

Here is the HTML code I am working with: <div id="tabsWithStyle"> <ul> <li><a href="#data1">Data 1 TAB</a></li> <li><a href="#data2">Data 2 TAB</a></li> <li>< ...

jqueryhtmltabs

Edit: "Submit a binary file with just JavaScript"

I am currently developing a Chrome application that utilizes the HTML5 Filesystem API to enable users to import and synchronize files. A challenge I'm facing is when attempting to sync image files, as they appear to become corrupted during the upload ...

javascriptajaxhtmlgoogle-chromemootools

Manage user interface elements on mobile devices

When viewing my label and two textbox controls on a desktop, they are aligned horizontally. However, I want these textboxes to stack on top of each other when the user views the site on mobile. I am using a media query to adjust to a mobile view, and all o ...

asp.netcssmedia-queries

Obtain User Input from a TextArea Element on an HTML Page using ASP.net

In my asp.net 4.0 project, I am using jTemplates to create a HTML-Page that includes a text area and a submit button. I am looking for a way to retrieve the value entered in the text area when the user clicks on the submit button. Can anyone provide guid ...

asp.nethtmljtemplates

Is there a reason we are able to simultaneously assign the disabled and selected attributes to <option> elements?

What is the rationale behind permitting the simultaneous setting of disabled and selected attributes on <option> elements, knowing that their values will not be submitted to a server? I was surprised that I did not receive an error in VS Code when I ...

html

Identifying page elements in Protractor when they lack obvious identifiable properties

Scenario Here is the HTML code snippet using an Angular JS template: <div class="data-handler-container"> <div class="row"> <div class="data-handler" ng-if="dataController.showDistance()"> <p>{{ 'Item ...

javascripthtmlangularjsprotractorangularjs-e2e

Are there any images included in the WebResponse being downloaded?

I need to download HTML efficiently in order to parse it with minimal bandwidth consumption. Here is a snippet of my code: if (!String.IsNullOrEmpty(siteAddress)) webReq = WebRequest.Create(siteAddress) WebResponse webRes ...

.nethtmlhtml-agility-packbandwidthwebresponse

Button click triggers CSS animation

Check out the interactive demo $(document).ready(function(){ $('#btn-animate').click(function(){ animate(); }); $('#btn-remove').click(function(){ $('.to-animate').removeClass('animate'); }); func ...

javascriptjqueryhtmlcssanimation

Guidelines on centering an AJAX spinning animation within a parent div

Below is the basic structure of an HTML document for a webpage. <div class="grand-parent"> <div class="header">Heading</div> <div class="parent-div"> <div class="child-div-1"></div> ...

javascriptjqueryhtmlcssajax

Show equally sized elements using a grid system

I need assistance with displaying fields in a row using CSS grid. I want to display 3 fields in a row with equal width, and if there are only 2 fields, they should also have equal widths. Additionally, if there is only one field, it should take up the full ...

cssreactjsmaterial-uicss-grid

I am looking to superimpose one rectangle over another rectangle

I am looking to create something similar using CSS and TypeScript/JavaScript: Could someone please guide me on how to achieve this? My attempt with a flex container looks like this: I am new to front-end development. Can anyone point out what I might be ...

javascripthtmlcssreactjstypescript

State change shows the previous and current values simultaneously

I've been working on updating the values of initUsers on the DOM. The initial state values work fine, but when I try to update initUsers, it displays different values than expected. Essentially, entriesNum receives a number as an event and changes th ...

javascripthtmlcssreactjsjsx