Attempting to place words beneath an image can distort the overall layout

Having trouble aligning text under 3 images in a row? All the solutions I've come across end up stacking the images vertically instead of horizontally.

HTML:

<div id="SecondFooter" class="responsiveColumn">
            <a href="link here" target="_blank"><img src="img.jpg"></a>
            <a href="link here" target="_blank"><img src="img.jpg"></a>
            <a href="link here" target="_blank"><img src="img.jpg"></a>
</div>

CSS:

#SecondFooter {
    width: 600px;
    background-color: #ffffff; 
    color: #000000; 
    font-family: arial,helvetica,sans-serif; 
    font-size: 11px;
    text-align: center;
}

#SecondFooter img{
    display: inline-block;
    width: 155px;
    height: 155px;
    padding: 5px;
    margin: 0;
}

Attempts with figures and figcaption have been made. Splitting each image into its own div only ends up stacking everything vertically. The goal is to maintain a horizontal alignment.

htmlcss

Answer №1

Have you considered creating a parent div and placing all the individual image divs inside it? It could look something like this:

<div> 
   <div>
      <img>
      <p>
   </div>
   <div>
      <img>
      <p>
   </div>
   <div>
      <img>
      <p>
   </div>
</div>

Perhaps this approach will solve the issue at hand.

Answer №2

Here is the solution you were searching for. The additional CSS is solely for enhancing the appearance.

  align-items: center;
  display: flex;
  height: 100vh;
  justify-content: center;

Do check out for some great practice exercises on utilizing flexbox effectively.

For a live example, visit https://codepen.io/garynorris88/pen/owQpvN?editors=1100

Answer №3

Here are a couple of things that require your attention:

1 - Make sure to close all your image tags properly.

2 - Remember to add units (such as px) to the width and height of your image. For instance, change 155 to 155px

Check out this link for more details

HTML

<a href="insert link here" target="_blank"><img src="img.jpg" /></a>

CSS

#SecondFooter img{
    display: inline-block;
    width: 155px;
    height: 155px;
    padding: 5px;
    margin: 0;
}

Answer №4

All you need to do is align your anchor tags to the left inside the #SecondFooter div, like this:

#SecondFooter a {
  float: left;
}

Here is how your HTML should be structured. I have included a p tag after the img tag with some text as an example:

<div id="SecondFooter" class="responsiveColumn">
  <a href="link here" target="_blank">
    <img src="img.jpg">
    <p>hi there</p>
  </a>
  <a href="link here" target="_blank">
    <img src="img.jpg">
    <p>hi there</p>
  </a>
  <a href="link here" target="_blank">
    <img src="img.jpg">
    <p>hi there</p>
  </a> </div>

To ensure that everything stays centered, I introduced a couple of wrappers:

HTML:

<div id="SecondFooter" class="responsiveColumn">
  <div class="wrapper">
    <div class="link-wrapper">
      <a href="link here" target="_blank">
        <img src="img.jpg">
        <p>hi there</p>
      </a>
      <a href="link here" target="_blank">
        <img src="img.jpg">
        <p>hi there</p>
      </a>
      <a href="link here" target="_blank">
        <img src="img.jpg">
        <p>hi there</p>
      </a>
    </div>
  </div>
</div>

Changes in CSS: I modified the width of SecondFooter to width: 100%;

#SecondFooter {
  width: 100%;
  background-color: #ffffff; 
  color: #000000; 
  font-family: arial,helvetica,sans-serif; 
  font-size: 11px;
  text-align: center;

}

.wrapper {
  width: 90%;
  margin: 0 auto;
}

.link-wrapper {
  width: 60%;
  margin: 0 auto;
}

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 the best way to remove an active class by clicking in my specific situation?

I was working on creating a gallery of Unsplash images that would display a full-screen image when the user clicked on a small image. I implemented a modal window that should appear when the user clicks on the small image, and I wanted it to close when the ...

javascriptcssreactjsonclickmodal-dialog

Having trouble with my phonegap app not allowing me to open any

I've just embarked on creating my first phonegap application using an HTML5 mobile website template. After deploying it, I noticed that the external links are not working within the app. Clicking on a link doesn't seem to do anything. To addres ...

androidhtmlcordovaphonegap-plugins

Styling the jQuery location picker input with background and focus effects

While working on a web app using jQuery locationpicker, I noticed that it's causing some styling issues with the input. Despite being able to adjust properties like width, padding, and border, changing the background requires using jQuery. Here is th ...

javascriptjqueryhtmlcssjquery-plugins

What is the best way to vertically center all content, including borders, within the columns?

To view the codepen for reference, please click on the following link: http://codepen.io/rezasan/pen/apvMOR I am attempting to align all the content within the columns (Date, Title, and Button, including the separator) vertically. I have tried using displ ...

htmlcssgridvertical-alignmentcss-tables

Transforming data from an HTML form into a PDF document - Tips for generating multiple outputs

As a newcomer to coding, I am facing a challenge in passing input data from a form to a PHP response page and then displaying it in the browser. I have created a functionality where the user can click on a button to save the HTML element to PDF. However, I ...

javascriptphphtmljquerypdf

Obtain the final output of a specific class utilizing jQuery

My HTML table structure is as follows: <tbody id="letter-list"> <?php $index = 0; foreach($letters as $letter) { $index++; ?> <tr id="letter-<?php echo $index; ?>"> <td><?php echo $l ...

phpjqueryhtml

CSS: Trouble with getting SVG sprite to work

I am struggling to combine all my SVG icons into one sprite and then call it from CSS as a background-image, similar to how we do with other images. However, the icons are not showing up on the page. When I open the SVG image in my browser, I encounter thi ...

csssvg

What steps can be taken to ensure that a box is the exact same size

Is it possible to make two of my main buttons the same size? I'm just starting out in web development and could use some guidance. Below is the HTML and CSS code I currently have for my index.html: <body> <div> <img src="img/projec ...

htmlcss

Modifying linked dropdown selections with jQuery

I'm trying to create a recurrent functionality where I have 3 select elements. When the first select is changed, it should update the second and third selects accordingly. If the second select is changed, then it should also affect the third select. ...

javascriptjqueryhtmljquery-uiselect

Tips for adding an svg element to an existing svg using d3.js

Can another SVG be appended to an existing SVG parent using d3.js? I have tried using the 'svg:image' attribute, but unfortunately, I lose full control over the inner SVG child. The DOM node is created by d3, but it is not rendered, resulting i ...

javascripthtmlangularjsd3.jssvg

Ways to minimize the space between elements in a flex container

My goal is to minimize the space between my images that expand on hover. I aim for it to resemble this: expectation However, the current appearance is more like this: reality This is what I currently have: .container { display: flex; width: 100 ...

cssflexboxmargin

Applying CSS transition delays to multiple images

I'm having trouble implementing a transition delay in my CSS. I've tried adding it in various places but it doesn't seem to be working as expected. This is my CSS: .imageBox { position: relative; float: left; transition ...

htmlcss

Browser displaying a CSS error: "Invalid property name" while applying pseudo-element :after

I encountered an issue in Chrome and Explorer while attempting to set a CSS property for a pseudo element :after. (I'm trying to create a styled burger nav icon) The error message I received was: 'Unknown property name' This happened wh ...

javascripthtmlcss

Is there a way to update CSS dynamically in server-side ASP.NET?

Is there a way to dynamically change the CSS values based on the server's response? I attempted to use inline expressions, but unfortunately, it did not yield the desired outcome. @keyframes loading-1 { 0% { -webkit-transform: rotate(<%=cpuRigh ...

c#cssasp.net

Adding an external JavaScript file to an HTML document by importing an array

Having trouble loading an array from an external JS file into my HTML. Snippet from js.js: var temp_max = [4,9,2,5,8,4,2,10]; In the HTML: Note: Be sure to download DateJS and place it in "DATE-JS"!! <!doctype html> <html> ... (HTML c ...

javascripthtmlarrays

Using JSON as HTML data within Flexbox for interactive hyperlink rollovers

Utilizing JSON to extract HTML data with unique html tags within Flex has presented a challenge. The limited support for HTML in Flex has made it difficult to implement a basic font color rollover effect on links. While Flex only allows for a few HTML tags ...

htmlcssapache-flexjsonrollovers

Creating a split background with dual hues in a VUE project

I'm new to learning VUE and I'm trying to create a page where two different colors connect on the left and right with the same height. However, I'm running into issues where the colors don't align unless I add content to the right side. ...

cssvue.jsvuejs2

What is the best way to trigger card opening - through clicking or hovering?

Once the Set tag/status button on the left is clicked, I aim to display a card similar to this one on the right side. What would be the best approach to achieve this in React? Should I use regular CSS, Material UI, or React-bootstrap? https://i.stack.img ...

cssreactjssassmaterial-uireact-bootstrap

The input box fails to show larger values on the user's page

Show me the biggest number that the user enters in an input box and then display it back to them. I need some improvements to my code, ideally making it possible with just one input box instead of two. <!DOCTYPE html> <html la ...

javascripthtmlcssif-statement

Unable to eliminate the border gaps in the table

I'm having trouble getting the picture and grey area in the example attached to stay together and be the same height. The border-spacing seems to be causing an issue. Any suggestions on how to fix this? Apologies for the messy style sheet. Here' ...

htmlhtml-tablepaddingborder-spacing