Show Pictures Side by Side with Captions Below

I need help organizing multiple images in a row with text underneath for my college project. I've been experimenting with some code but haven't had any success yet.

<div class="test">
  <p>
    <a href="https://www.facebook.com">
      <img height="200px" style="display: block; margin-left: 100px; float: left;border: 2px solid white; border-radius: 100%; margin-top: 30px;" src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-9/12512240_1005566046198664_2775546349199755757_n.jpg?oh=a37edadd99a4631e165accf6bd193a9f&oe=58C8AD58">
      <h3>Test</h3>
    </a>
  </p>
  <p>
    <a href="https://www.facebook.com">
      <img height="200px" style="display: block; margin-left: 500px; float: left;border: 2px solid white; border-radius: 100%; margin-top: 30px;" src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-9/12512240_1005566046198664_2775546349199755757_n.jpg?oh=a37edadd99a4631e165accf6bd193a9f&oe=58C8AD58">
      <h3>Test</h3>
    </a>
  </p>
  <p>
    <a href="https://www.facebook.com">
      <img height="200px" style="display: block; margin-left: 500px; float: left;border: 2px solid white; border-radius: 100%; margin-top: 30px;" src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-9/12512240_1005566046198664_2775546349199755757_n.jpg?oh=a37edadd99a4631e165accf6bd193a9f&oe=58C8AD58">
      <h3>Test</h3>
    </a>
  </p>
</div>

htmlcss

Answer №1

Personally, this is how I would approach it:

.test a {
    margin-left: 10px; 
    float: left;
    text-align: center;
    overflow: auto; 
}

.test a img {
    width: 100px;
    border:2px solid white; 
    border-radius: 50%; 
}
<div class="test">
        <a href="https://www.facebook.com">
            <img src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-9/12512240_1005566046198664_2775546349199755757_n.jpg?oh=a37edadd99a4631e165accf6bd193a9f&oe=58C8AD58">
            <h3>Test</h3>
        </a>
            <a href="https://www.facebook.com">
                <img src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-9/12512240_1005566046198664_2775546349199755757_n.jpg?oh=a37edadd99a4631e165accf6bd193a9f&oe=58C8AD58">
                <h3>Test</h3>
            </a>
           
                <a href="https://www.facebook.com">
                    <img src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-9/12512240_1005566046198664_2775546349199755757_n.jpg?oh=a37edadd99a4631e165accf6bd193a9f&oe=58C8AD58">
                    <h3>Test</h3>
                </a>
</div>

Here are some key points to keep in mind:

  • Utilize HTML for structuring content and CSS for styling purposes.
  • The p tag may not be essential in this context.
  • In order to align the three blocks on one line, apply 'float:left' to the <a> element rather than the image inside it.
  • When utilizing a float-based layout, remember to handle clearing floats (since the container may not stretch to accommodate them) by adding 'overflow: auto' to the '.test' container.
  • There are numerous techniques available for laying out elements with CSS, with Flexbox being a recommended option for flexible layouts.

Answer №2

To start, make sure to properly close all <p> tags.

Next, I suggest adding an inline-block style to the p elements and removing the margin-left on the image.

.test {
  text-align: center;
}

img {
  display: block; 
  float: left;
  border: 2px solid white; 
  border-radius: 100%; 
  margin-top: 30px; 
}

p {
  display: inline-block;
}

Answer №3

Here are the two essential steps you need to follow:

  1. Make use of HTML wrapping DIVs to gain control over your blocks.
  2. Utilize CSS

Feel free to experiment with this fiddle that might fulfill your needs:

<style>
    div.test {
    width:auto;
    margin: auto;
    }
    
    div.block {
 
    float: left;

    }
    
    div.block a{
    display:inline-block; 
    margin-left: 50px;
    }
    
    
    div.block img {
    border: 2px solid white; 
    border-radius: 100%;
    width:150px;
    }
    
    h3 {
    text-align: center;
    }
    
</style>

<div class="test">
<div class='block'>
<a href="https://www.facebook.com">
<img src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-9/12512240_1005566046198664_2775546349199755757_n.jpg?oh=a37edadd99a4631e165accf6bd193a9f&oe=58C8AD58">
<h3>Test</h3>
</a>
</div>
<div class='block'>
<a href="https://www.facebook.com">
<img src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-9/12512240_1005566046198664_2775546349199755757_n.jpg?oh=a37edadd99a4631e165accf6bd193a9f&oe=58C8AD58">
<h3>Test</h3>
</a>
    <div class='block'>
<a href="https://www.facebook.com">
<img src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-9/12512240_1005566046198664_2775546349199755757_n.jpg?oh=a37edadd99a4631e165accf6bd193a9f&oe=58C8AD58">
<h3>Test</h3>
</a>
    </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

Adjust the column count based on the screen size, Susy suggested

When using the Compass/Sass plugin Susy, you typically set the number of columns in the _base.scss file. I prefer to have 12 columns for a desktop view, but this may be too many columns for a mobile display. Is there a method to alter the number of column ...

csssasssusy-compass

Adding an iframe with inline script to my Next.js website: A step-by-step guide

For my Next.js project, I have this iframe that needs to be integrated: <iframe class="plot" aria-label="Map" id="datawrapper-chart-${id}" src="https://datawrapper.dwcdn.net/${id}/1/" style="width: ...

javascripthtmlreactjsnext.js

What is the best way to incorporate polling into the code provided below? I specifically need to retrieve data from the given URL every 60 seconds. How should I go about achieving this

Can you assist me in integrating polling into the code below? <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="https://code.highcharts.com/highcharts.js"> ...

javascripthtmlajaxhighcharts

What is the best way to set a newly selected HTML option as the first choice?

I'm facing a simple problem in JavaScript that I can't seem to crack. Admittedly, I am new to working with JavaScript. My issue lies with sorting a dropdown list in alphabetical order while also keeping the selected value at the top. Whenever a ...

javascriptjqueryhtmltwig

Issue with Fancybox Buttons not appearing on parent page upon opening

I previously asked for help on how to open fancybox from an iframe to the parent page. The solution worked perfectly and is still functioning well. Now, I've been requested to add left and right arrow buttons, but it seems that using the code to open ...

jqueryhtmlfancybox

Displaying images in Dash Python by utilizing external Javascript

Dear audience, I am looking to incorporate an image on a Python Dash webpage that is created by JavaScript code. For more details, you can refer to the documentation here: . To include this script in a static HTML page, one would typically add the followi ...

javascriptpythonhtmlplotlyplotly-dash

Guide on displaying Adsense ads specifically for mobile devices

Can anyone provide me with a proper method to show/hide my AdSense ads on both mobile and desktop? I am currently using a method that results in 2 console errors. Here is the current approach: We are utilizing two classes, "mobileShow" and "mobileno," t ...

cssmobiledesktopadsense

Having difficulty aligning ListItem to the right within a List

I am working with an array that contains objects which I need to display in ListItems of a List. My goal is to show these ListItems from the array Objects in a layout where odd numbers are on the left and even numbers are on the right. However, I am facing ...

javascriptcssreactjsmaterial-ui

Tips on how to update the styling of an active link

http://jsfiddle.net/G8djC/2/ Looking to create a tabbed area where content changes based on the tab clicked. The Javascript function switches the link class to active upon clicking. However, struggling to change the color of the active tab beyond the firs ...

javascripthtmlcssclasstabs

Revamp the sequence of divs using jQuery

<div class="example first">111</div> <div class="example second">222</div> <div class="example third">333</div> Can the order of these divs be changed using jQuery? I am looking to get: <div class="example second"&g ...

javascriptjqueryhtmlcss

What is the best way to position my logo on top of the stunning space background?

Click here to check out the code on CodePen Please take a look at my code on codepen.io. I am new to Stack Overflow so please be patient with me if I make any mistakes. ;-; I currently have my logo (https://i.stack.imgur.com/W0nWc.png) included in the co ...

javascripthtmlcsslayer

"Using Mxgraph's getPrettyXml function does not retrieve the value of a custom

I’m having trouble with mxgraph’s getPrettyXml() not capturing the value of Custom elements. In my customized template, it looks like this: <add as="symbol"> <Symbol label="Symbol" description="" href="" data="{[hi :bill]}"> &l ...

javascripthtmlmxgraph

Issue encountered while attempting to delete dynamically added fields

I'm facing an issue where I am adding 3 fields dynamically (2 text fields and 1 remove button). The add button is functioning correctly, but the problem arises with the remove function. Currently, it only removes the remove button itself and not the o ...

javascriptjqueryhtmltwitter-bootstrap

Responsive center alignment of stacked `<div>` elements using CSS

My goal is to center a stack of divs in 3 columns per row if the browser window is wider than 1024px, and switch to 2 columns per row if it's smaller, while still displaying all 6 divs. Unfortunately, I'm facing difficulties trying to apply what ...

css

Elements that intersect in a site's adaptable layout

I need to create a design similar to this using HTML/CSS with the Skeleton framework: view design preview I've experimented with various methods to overlap the background and image, utilizing absolute positioning for the image. However, this approach ...

htmlcssoverlappingskeleton-css-boilerplateresponsive

How can you switch the display between two different class names using JavaScript?

I currently have a total of four filter buttons on my website, and I only want two of them to be visible at any given time. To achieve this, I labeled the first set of buttons as .switch1 and the second set as .switch2. Now, I've added a 'switch ...

javascripthtmlcsstoggleweb-frontend

Text input field for username not visible on screen

https://i.stack.imgur.com/2UUQl.png After designing the login page for my current project, I seem to have accidentally hidden the username text input. Can anyone explain why this is happening and provide guidance on how to make it visible again? ...

htmlcss

How to enhance the design with a box-shadow for a :after pseudo element

One of the challenges I'm facing involves a CSS design with a div called .testimonial-inner that has an arrow created using the :after pseudo element. The issue is making them appear as one cohesive element, especially when applying a box-shadow. Her ...

htmlcsspseudo-elementcss-shapes

Capture the selected hyperlink and show the corresponding page title in a designated box for reference

I want to track the links that users click on and display them in a box with an image and name of the page. Additionally, I would like to show how long the user spent on each page below the image. The images in the box should also be clickable links to the ...

javascriptjqueryhtmlcookies

When a CSS fluid layout includes a containing div with margin or padding, it may lead to

On my jsfiddle , the outermost wrapper div has a width of 100%. I am trying to create an inner div (tb_margin or tb_padding) where the content starts 40px from the left. I have attempted to use both margin and padding for this left spacing, but in both cas ...

htmlcssboxlayout