`Arranging Pictures Side by Side`

To those who have stumbled upon my previous post on this topic, I'm revisiting the issue with a new perspective because it presents a slightly different challenge, but falls into the same category.

It appears that aligning text below images is causing chaos when attempting to format it correctly. Below is an image of the page without any text under the images: View Image of the Crew Page

Here is the code for the crew page, prior to adding any text:

<section id="crew">
    <h1 style="color:#fff">Crew</h1>
<br>
<div style="justify-content:center" class="container5">

    <img hspace="20" class="crew grow" src="http://nexuscoding.net/5h0GIcqwYiXafUkKEGYy.png">
    <img hspace="20" class="crew grow" src="http://nexuscoding.net/5h0GIcqwYiXafUkKEGYy.png">
    <img hspace="20" class="crew grow" src="http://nexuscoding.net/5h0GIcqwYiXafUkKEGYy.png">
    <br><br><br><br><br>

    <img hspace="20" class="crew grow" src="http://nexuscoding.net/5h0GIcqwYiXafUkKEGYy.png">
    <img hspace="20" class="crew grow" src="http://nexuscoding.net/5h0GIcqwYiXafUkKEGYy.png">
    <img hspace="20" class="crew grow" src="http://nexuscoding.net/5h0GIcqwYiXafUkKEGYy.png">

    </div>        
</section>

Now take a look at the image after trying to integrate text under the images: View Image of the Crew Page after Text Insertion

Below is the updated code for the section following the addition of text:

<section id="crew">
    <h1 style="color:#fff">Crew</h1>
<br>
<div style="justify-content:center" class="container5">

    <img hspace="20" class="crew grow" src="http://nexuscoding.net/5h0GIcqwYiXafUkKEGYy.png">
    <figcaption>Some Text</figcaption>
    <img hspace="20" class="crew grow" src="http://nexuscoding.net/5h0GIcqwYiXafUkKEGYy.png">
    <figcaption>Some Text</figcaption>
    <img hspace="20" class="crew grow" src="http://nexuscoding.net/5h0GIcqwYiXafUkKEGYy.png">
    <figcaption>Some Text</figcaption>
    <br><br><br><br><br>

    <img hspace="20" class="crew grow" src="http://nexuscoding.net/5h0GIcqwYiXafUkKEGYy.png">
    <figcaption>Some Text</figcaption>
    <img hspace="20" class="crew grow" src="http://nexuscoding.net/5h0GIcqwYiXafUkKEGYy.png">
    <figcaption>Some Text</figcaption>
    <img hspace="20" class="crew grow" src="http://nexuscoding.net/5h0GIcqwYiXafUkKEGYy.png">
    <figcaption>Some Text</figcaption>

    </div>        
</section>

Clearly, introducing text has caused unforeseen issues, and I can't quite pinpoint why this is happening. Any insights would be greatly appreciated. Thank you for taking the time to read through the post.

htmlcssimage

Answer №1

The reason for this issue is that the <figcaption> element is set to display: block by default, causing it to take up the full width of its parent element. To solve this, I recommend wrapping an image and its corresponding caption in a div.

.cont {
  display: inline-block;
  text-align: center;
}
<section id="crew">
    <h1 style="color: black">Crew</h1>
<br>
<div style="justify-content:center" class="container5">
<div class=cont>
    <img hspace="20" class="crew grow" src="http://nexuscoding.net/5h0GIcqwYiXafUkKEGYy.png">
    <figcaption>Some Text</figcaption>
    </div>
    <div class=cont>
    <img hspace="20" class="crew grow" src="http://nexuscoding.net/5h0GIcqwYiXafUkKEGYy.png">
    <figcaption>Some Text</figcaption>
    </div>
    <div class=cont>
    <img hspace="20" class="crew grow" src="http://nexuscoding.net/5h0GIcqwYiXafUkKEGYy.png">
    <figcaption>Some Text</figcaption>
    </div>
    <br><br><br><br><br>

<div class=cont>
    <img hspace="20" class="crew grow" src="http://nexuscoding.net/5h0GIcqwYiXafUkKEGYy.png">
    <figcaption>Some Text</figcaption>
    </div>
    <div class=cont>
    <img hspace="20" class="crew grow" src="http://nexuscoding.net/5h0GIcqwYiXafUkKEGYy.png">
    <figcaption>Some Text</figcaption>
    </div>
    <div class=cont>
    <img hspace="20" class="crew grow" src="http://nexuscoding.net/5h0GIcqwYiXafUkKEGYy.png">
    <figcaption>Some Text</figcaption>
    </div>

    </div>        
</section>

For a live example, check out this JSFiddle link.

Answer №2

To start, place both the <img> and <figcaption> tags within a <figure> tag (each one in a separate figure) like this:

<figure>
  <img src="test.bmp" />
  <figcaption>
    Hello
  </figcaption>
</figure>
<figure>
  <img src="test2.bmp" />
  <figcaption>
    Hello
  </figcaption>
  </figure>

Next, apply CSS to float the figure tags to the left like this:

figure{float:left;}

By following these steps, you will achieve your desired layout. Also, learn more about block and inline tags in HTML, as well as the concepts of float and position in CSS.

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

What is causing the <iframe> to malfunction when I use it?

I am encountering a problem with a basic snippet of HTML code: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8> <title>iframe Example</title> </head> <body> <div> & ...

htmlcss

What are some ways to monitor the movement of elements and activate functions at precise locations?

I am working on a project that involves a #ball element which, when clicked, utilizes jQuery animate to move downwards by 210px. The code I currently have is as follows: $('#ball').click(function() { $(this).animate({ top: '+=2 ...

javascriptjquerycss

Hide the menu when a user taps on an item on mobile or tablet devices

I'm facing a unique challenge and could use some guidance. The issue is with the mobile version of my website, accessible at . On tablets or mobile devices, the menu is condensed into a button. To navigate through the menu, I have to click the button ...

javascripthtmlcssmobile

best practices for creating space between flexbox items

My task involves presenting a continuous scroll list of scheduled jobs using Angular Material. Each item in the list needs to be divided into three columns utilizing flexbox. Despite my efforts, I am struggling with adding space between the columns within ...

cssangularflexboxangular-materialangular-cdk

Tips on saving x and y coordinates into separate arrays

This block of code extracts the x, y coordinates when the mouse is clicked. I am attempting to save the x coordinate in one array called a[10] and the y coordinate in another array named b[10]. However, despite using a for loop, the x, y coordinates are n ...

c++arraysimageopencv

Concealing the footer on a webpage embedded within an iframe

<script> $(document).ready(function(){ $('.mydivclass').hide(); }); </script> Looking to embed Microsoft Forms in my HTML using an iframe. Can the footer of the Microsoft Forms be removed? ...

jqueryhtmliframecross-domain

Applying the CSS `capitalize` property does not have any impact in an HTTP POST

After applying the css property text-transform:capitalize;, I observed that it does not retain the capitalized value when sending the input through an http-post to another page. What could be the reason for this behavior? Is there a solution to preserv ...

csspostcapitalize

When a user hovers over a sub-menu item in Bootstrap that has its own sub-menu, it causes the parent

I am facing an issue with my bootstrap drop-down menu. The main drop-down list has 3 items, each of which has a sub-list displayed on hover. However, when I hover over these items, the layout gets rearranged instead of maintaining its static appearance and ...

jqueryhtmldrop-down-menubootstrap-4hover

You cannot use css() in conjunction with appendTo()

$('#item').click(function() { $.ajax({ url: 'server.php', type: 'POST', data : {temp : 'aValue'}, success: function(data) { $(data).css('color&apo ...

jquerycssappendto

Why is the format incorrect when the Angular 7 (Change)-Function on Input of type Date isn't functioning?

I am facing an issue with updating the date using key input and assigning the selected date to a property of my object. Below is the code I'm currently working with: <input type="date" [value]="dateTime()" (change)="setDate($event)"/> The dat ...

htmlangulartypescripthtml-input

Node replication including a drop-down menu

Is there a way to clone a dropdown menu and text box with their values, then append them to the next line when clicking a button? Check out my HTML code snippet: <div class="container"> <div class="mynode"> <span class=& ...

javascripthtml

Adjusting Dropdown Direction Based on Section Location – A Step-by-Step Guide

Question: Is there a way to adjust the bootstrap dropdown so that it can appear either above or below depending on where the section is positioned? Check out my code here Here is the CSS I am using: #cover-inspiration{ width: 100%; height: 100vh ...

jqueryhtmlcsstwitter-bootstrap

Assistance required for locating elements in Selenium using Css Selector

Hi there, I'm not really a developer. I've got two checkboxes in my table without any IDs. Usually, I can easily work with Selenium when elements have IDs, but in this case, the table was generated using jquery datatables and no automatic ID ass ...

c#cssgoogle-chromeseleniumselenium-webdriver

css hover function not operational with back to top button

I have implemented a back to top button using the following resource: Although the button is functioning as expected, I am encountering an issue with the hover effect. In Chrome inspector, manually forcing hover on .cd-top does not apply the CSS style as ...

htmlcss

How should event.preventDefault be properly utilized in React? Is it appropriate to use it with the onClick event on <button> elements?

I've been feeling lost trying to understand the guidelines from both React and some HTML resources on the proper way to handle click events. When it comes to buttons, such as a button that triggers an action upon click to submit a form, do I need to ...

javascripthtmlreactjs

Conceal HTML Table Rows

I have a HTML table that showcases items and their respective daily information - usage, incoming shipments, and inventory. The goal is to initially hide the first two columns and reveal them on mouseover using jQuery. I am planning to assign a class to ea ...

htmlcss

The functionality of Anchor `<a>` tags is compromised in Chrome when using the hashtag symbol (#)

Below is the code I have implemented on my website: <li><a href="/explore/#Sound">Sound</a></li> (This menu is visible on all pages) <a id="Sound"><a> (This is on the specific page where I want to link to) I have at ...

htmlgoogle-chromecross-browser

What is the optimal method for storing images on a website built with expressjs and mongodb?

I am currently diving into express, nodejs, and mongodb for a project I'm working on - creating a website for a clothing store. The client will be uploading new images every 2 days, which need to be displayed quickly as thumbnails on the website. User ...

node.jsmongodbimageexpress

Issue with Bootstrap 5: Navigation feature struggling in carousel

I am currently using bootstrap 5 and looking to incorporate an image carousel and a modal into my project. Here is the sample code I have: <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cf ...

javascripthtmltwitter-bootstrapbootstrap-5

When a user hovers over an element, display text in a particular div

I've been experimenting with different methods to achieve this, but nothing seems to be working for me. The idea is that when I hover over a specific div like "divOne" or "divTwo", I want a text to appear in the "writeToMe" div. After spending several ...

javascriptjqueryhtml