Attempting to align three images in a row on a webpage with clickable links placed below using HTML and CSS

Shown below is a snippet of the HTML code I am currently working with:

div.Navbar {
  margin-left: 10px;
  margin-right: 10px;
}
.icons {
  height: 300px;
}
<div class="NavBar">
  <img src="images/ThumbNails/Conflict.jpg" class="icons" style="float: left; width: 30%; margiwn-right: 1%; margin-bottom: 0.5em;" />
  <img src="images/ThumbNails/internationalN.jpg" class="icons" style="float: center; width: 30%; margin-right: 1%; margin-bottom: 0.5em;" />
  <img src="images/ThumbNails/Politics.jpg" class="icons" style="float: right; width: 30%; margin-right: 1%; margin-bottom: 0.5em;" />
</div>

Despite my attempts with CSS and HTML to wrap divs around each individual image, the layout gets messed up... I've consulted resources like stack overflow for guidance on this, but it still causes issues.

In short: with the existing code, the images align perfectly, making it challenging to center links underneath each image.

htmlcssimagealignment

Answer №1

Initially, using divs to wrap images and text/links was a solid starting point. It appears that you might have overlooked transferring the CSS styles from the images to the wrapping divs.

div.Topbar {
  margin-left: 15px;
  margin-right: 15px;
}
.pictures {
  height: 250px;
  width: 90%;
}
.container_img {
  float: right;
  width: 35%;
  margin-right: 2%;
  margin-bottom: 1em;
  text-align: center;
}
<div class="Topbar">
  <div class="container_img">
    <img src="https://placehold.it/400x250" class="pictures">
    <a href="#">link</a>
  </div>
  <div class="container_img">
    <img src="https://placehold.it/400x250" class="pictures">
    <a href="#">link</a>
  </div>
  <div class="container_img">
    <img src="https://placehold.it/400x250" class="pictures">
    <a href="#">link</a>
  </div>
</div>

Answer №2

If you're looking to create a layout with icons using flexbox, here's a suggestion:

(adjusted the icons' width & height for better display)

div.IconLayout {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
.IconLayout div {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
}
.icons {
  width: 130px;
  height: 130px;
}
<div class="IconLayout">
  <div>
    <img src="http://example.com/icon1.jpg" class="icons" /><a href="#"> Link 1</a>
  </div>
  <div>
    <img src="http://example.com/icon2.jpg" class="icons" /><a href="#"> Link 2</a>
  </div>
  <div>
    <img src="http://example.com/icon3.jpg" class="icons" /><a href="#"> Link 3</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

Changing the styling frameworks for Components

Into my UI application developed using Angular, I have the option to select from various CSS frameworks such as: Bootstrap 4 Foundation Angular Material ng-bootstrap or ngx-bootstrap. A pre-built template available for purchase. And many o ...

csstwitter-bootstrapangularangular-materialangular2-template

What methods can I implement to ensure a button illuminates only when correct information is provided?

I have developed a calculator for permutations and combinations. When either permutation or combination is selected, and the required values are entered, I want the calculate button to light up. How can I achieve this without using setInterval in my curren ...

javascripthtmlcssbuttoncalculator

What is the best way to apply an animation class to a modal upon clicking a button?

When I click the "x" button on the modal, I want the animation to occur. However, what currently happens is that the modal closes without the animation. Then, upon reopening the modal, the animation occurs without any clicking involved. Below is my curren ...

javascripthtmlcssbootstrap-5

Customizing Row Background Color in Bootstrap

Currently working on a project www.codepen.io/anon/pen/yMmjZb The problem I am facing is with my 3rd row (the one with the 3 columns) where the background color is bleeding beyond the intended boundary. My suspicion is that it's due to the row span ...

htmlcsstwitter-bootstrap

Guide on displaying a partial form as a horizontal form in Rails 4

I am facing an issue with displaying a form horizontally instead of vertically in a partial triggered by AJAX on my main page. I have tried various methods like using <form class="form-inline">, <%=f.number_field :pointsSpend, :class => "checkb ...

htmlcssruby-on-railsform-for

Safari is displaying the HTML5 range element improperly

My HTML input type=range element is styled perfectly in Chrome, but it's a disaster in Safari. The track ball disappears or only partially renders when moved, and it seems to take forever to load. Any idea what could be causing this strange behavior? ...

jqueryhtmlformscsssafari

Numerous objects come into view as you scroll

I found a code snippet online that animates items as they appear on scroll. However, the code only triggers animation for one item at a time. How can I modify the code to trigger the animation for all items? const observer = new IntersectionObserver(e ...

javascripthtmlcssanimation

Troubleshooting: CSS Selectors Hover Functionality Not Functioning as

I am having an issue where the styling does not change the display to block when hovering. Any insights or feedback would be greatly appreciated. <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="t ...

htmlcss

Ways to avoid extra function loads in JavaScript

I'm currently working on an instant search feature and have some code implemented: $(function() { var timer; $("#searchterm").on('keypress',function() { timer && clearTimeout(timer); timer = setTimeout(doStuff, 800); tim ...

javascriptjqueryhtmlajax

Is there a way to seamlessly incorporate a PHP tag into a Bootstrap dropdown for perfect alignment?

In relation to this query: I have successfully integrated the if/else statement into the dropdown without any issues. However, upon using the dropdown on the website, I noticed that the item generated by the if/else statement – in this case, "log in" or ...

phphtmlcssbootstrap-4

What is preventing the scrollbar-color property from being applied directly to the body element?

I've been experimenting with styling my scrollbars using CSS properties, like those described at https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars. Interestingly, when I apply these properties directly to the body element with code like ...

cssfirefox

Struggling to figure out the method for obtaining css selectors for scraping in scrapy

Struggling with scraping a website and figuring out how css selectors work in Scrapy. The css in question: https://ibb.co/eJeZpb Here are some standard css selectors: .css-truncate-target .message .js-navigation-open time-ago For scrapy, you would need ...

pythoncsspython-3.xscrapy

Modifying the data attribute within the div does not result in a different image for the 360-degree spin view

My current project involves utilizing js-cloudimage-360-view.min.js to create a 360-degree view of images. I have successfully retrieved the images, but I am encountering difficulty in updating the images by clicking a button. index.html <!DOCTYPE html ...

javascripthtml

A web address shared in a post appears within the nested frame of an iframe

I'm encountering a somewhat confusing issue. I am attempting to submit a URL to an iframe located on the same page. Upon clicking submit, the iframe replicates the current page, but with the correct URL displayed in the duplicated iframe. It's ma ...

phphtmlformsiframe

Ways to interact with a button that toggles between states

I am working with a button that has both an enabled and disabled state. Enabled State: <button type="button" class="btt-download-csv site-toolbar-menu-button icon-download no-icon-margins ng-isolate-scope" title="Download CSV" rc-download-csv="" curren ...

pythoncssselenium

What are some creative ways to provide video responses to a list of questions?

My task is to create a popup that includes questions and video responses. The challenging aspect for me is how to ensure each question displays a different video in the same location. Additionally, when the user first opens the popup, the initial question ...

javascriptjqueryhtmlcssvideo

Struggling with implementing CSS in React even after elevating specificity levels

I am struggling with a piece of code in my component that goes like this: return ( <div className="Home" id="Home"> <Customnav color="" height="80px" padding="5vh"/> <div className= ...

cssreactjsstyling

Selenium was unable to find the p tag element on the webpage

I apologize for reaching out to you all for assistance with such a basic task, but I have tried everything in my toolkit and still can't seem to figure it out. I've experimented with partial xpath, full xpath, and various CSS selectors. I am see ...

jquerycssseleniumxpath

The background image on my CSS is not showing up

I just added the file to my git repository and shared the link here. Is there a specific way to do this? html{ background-image:url("https://github.com/vindhya97/images/blob/master/pinkbackground.jpg"); } ...

htmlcss

Ways to extract image URLs from HTML and use them in Java

Hi there, I am trying to retrieve the URLs for images on Bing. For example, this link returns cat images. How can I specifically obtain the .png URLs? ...

androidhtml