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

Resolved issue with maintaining scroll position after adjustments to scroll height

Currently, I am in the process of creating a chatroom that includes pagination. The issue I am encountering is related to loading old messages when the scroll height reaches 0. However, unlike platforms such as Facebook and Slack, even when the scroll he ...

javascripthtmlcssreactjsnext.js

I am interested in incorporating a vertical scrollbar into a gridview in ASP.NET

I've successfully bound data to a grid view in my ASP.NET application. I've implemented pagination, but instead of that, I'd like to incorporate a scroll bar to prevent lengthy paging. Below is the code for my grid view: <div class="box ...

c#htmlcssasp.net

Error 404: Django failing to load image on the webpage

Just starting out with Django and I've hit a snag trying to load a static file (image). Here's the error message I'm getting: 127.0.0.1/:1707 GET http://127.0.0.1:8000/static/css/static/images/background/1.jpg 404 (Not Found) I suspect th ...

htmlcssdjangodjango-templates

Submit Button Field - HTML ButtonFor

Being relatively new to MVC Razor and web development, both front-end and back-end, I'm in need of a button that can send a stored value to the controller/model. I attempted to mimic the functionality of Html.TextBoxFor by giving it attributes similar ...

javascriptc#jqueryhtmlrazor

The native javascript modal fails to appear

I'm attempting to implement the functionality from this Codepen demo into my project. I've copied over the HTML, CSS, and JavaScript code: <!DOCTYPE HTML> <html> <head> <script> var dialog = docume ...

javascripthtmlcss

Is it possible to close the navigation menu by clicking on a link or outside of the navigation area?

Hey everyone, I've recently dived into the world of web design and encountered my first hurdle. I need your expertise to help me solve this problem. How can I modify my JavaScript to close the NAV element by clicking on one of the links or outside t ...

javascripthtmlonclicknav

Displaying text on hover and showing a text box when a link is clicked using CSS and JavaScript

Hovering over the text will display "Edit," and clicking on it will reveal a text box. This function will be used to update content using ajax. HTML: <table> <thead> <tr> <th> Name </th> <th> Age </th> ...

javascripthtmlcssshow-hide

What is the best way to navigate to the href link?

After attempting to use driver.find_element_by_id // link_text // partial link text without success, I'm wondering what method I should be using to access this href. Currently encountering a No Such Element Exception. Any assistance would be greatly a ...

pythonhtmlseleniumhref

Running CesiumJS is a straightforward process that can be done by

After diligently following the provided instructions, I managed to get cesium running locally. I then attempted the hello world example as shown: However, despite clicking on "open in browser," I couldn't see anything. It has been a constant struggl ...

javascripthtmlcssconfigurationcesiumjs

Animating Elements with CSS and HTML

Struggling with my website project, specifically creating a login page. The issue arises when resizing the browser, causing elements to look misaligned and chaotic. Before: view image here After: view image here /* Bordered form */ form { margin-l ...

htmlcss

PHP isn't sending data (even though the name tag is defined)

After reviewing numerous posts where individuals forget to include the name attribute in their input tags, I came up with a simple script: <form action="submit_form.php" method="post"> Name: <input type="text" name="name"><br> ...

htmlpostphpstormphp

Dealing with unreadable strings when formatting dates in a JSP

When working on a JSP project, I encountered a situation where I needed to format a Java Date retrieved from the request. My current approach looks like this: <fmt:formatDate value="${attribute.value}" pattern="yyyy-MM-dd HH:mm:ss"/> This method wo ...

javahtmljspjstl

table with flexible cell width and fixed table width

I've been troubleshooting this issue for days, but I just can't seem to find a solution! The problem lies within a table used on a webpage. If I don't specify table-layout, I can make one cell width dynamic, but I lose the ability to set &a ...

htmlcss

Linking a watcher property to control the opacity value of inline styles

Struggling to connect the opacity of a div with the value of a slider. <div class="container" v-bind:style="opacity">test content</div> Despite my efforts, I can't seem to make the binding work correctly. When I check in the developer to ...

javascripthtmlcssvue.js

Implementing a download hyperlink attribute for a button with jQuery

How can I create a jQuery function for a button? <input type="submit" id="submit"></input> Once clicked, it should trigger the following action: <a download href="file.doc"></a> <script> $("#submit").click(function(){ ...

javascriptjqueryhtml

HTML and CSS for an off-canvas menu

Looking to create an off-canvas menu that smoothly pushes content out of view instead of cropping it. Additionally, I want to implement a feature that allows the menu to close when clicking outside of it. I found the code for the off-canvas menu on W3Scho ...

javascripthtmlcssoff-canvas-menu

When I add text to div boxes, they begin to drift downward

After creating four div boxes with content, I encountered an issue. Initially, when inserting filler text, everything seemed fine. However, as soon as I started adding actual content into the first box, the other three boxes shifted downwards by the same a ...

htmlcss

I attempted to update the text on an HTML page using the content of "conetnt", however, it was unsuccessful

.custom-div { outline: none !important; width: 450px; margin: auto; background-color: #ccc !important; text-indent: -9999px;} .custom-div::before{content: 'sample';color: black;} ...

htmlcss

When it comes to utilizing the method ".style.something" in JavaScript

Here is some javascript code that I am working with: function createDiv(id){ var temp = document.createElement('div'); temp.setAttribute("id", id); document.getElementsByTagName('body')[0].appendChild(temp); } c ...

javascriptcsshtml

Performing a series of SQL queries in order to fill out the contents of

I am currently working on populating a summary table from a MySQL database, which consists of multiple rows and cells. Here is the image of my table: I initially thought about writing individual SQL queries for each cell, but this approach would require a ...

phphtmlmysqlhtml-table