I am seeking to showcase a series of images in a horizontal layout on my page. Beneath each image, there are several links that need to be grouped together within a container.
So far, I have tried placing them in floating divs, which align them to the left. However, what I desire is for these containers to be aligned center. Is there a way to accomplish this?
opt for using display:inline-block; instead of using float
floating elements cannot be centered, but with inline-block, the elements can be centered as if they were text. So, in the main container of your "row," you would apply text-align: center;. Then, for each image or caption container (which should be set to inline-block;), you can adjust the text alignment to left if needed
CSS Flexbox has great support in modern browsers. If you want to learn more about flexbox, check out this tutorial.
This code snippet is compatible with newer browsers:
#container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.block {
width: 150px;
height: 150px;
background-color: #cccccc;
margin: 10px;
}<div id="container">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
<div class="block">5</div>
</div>Some people may wonder why not use display: inline-block? While it's suitable for simple layouts, when dealing with complex content within the blocks, the alignment may become off-center. Flexbox provides a more reliable alternative to float left.
Here is a suggested approach:
<div id="container">
<div class="imageHolder">
IMAGE HERE
</div>
<div class="imageHolder">
IMAGE HERE
</div>
<div class="imageHolder">
IMAGE HERE
</div>
<br class="clear" />
</div>
<style type="text/css">
#container { margin: 0 auto; width: 800px; }
.imageHolder { float:left; }
.clear { clear:both; }
</style>
To properly position floated elements, simply place them inside a <div> and apply the following CSS:
.container {
display: table;
margin: auto;
}
If you're searching for the solution, perhaps this link would be helpful - https://www.w3schools.com/css/css3_flexbox.asp
CSS:
#container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.block {
width: 150px;
height: 150px;
margin: 10px;
}
HTML:
<div id="container">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
</div>
.containerBox {
float: left;
clear: both;
margin-left: 10%;
margin-right: 10%;
}
.duplicator {
height: 9em;
width: 9em;
float: left;
margin: 0.2em;
position: relative;
text-align: center;
cursor: pointer;
}
<html>
<head>
<title>Download Options</title>
<style>
.download-container{
width:80%;
margin:0 auto;
text-align:center;
border:1px solid black;
padding:20px;
}
.download-cell{
vertical-align:center;
height:120px;
width:340px;
border:1px solid black;
border-radius:8px;
font-size:24px;
color:black;
display:inline-block;
padding-top:10px;
background-color:white;
}
</style>
</head>
<body>
<!--DOWNLOAD OPTIONS-->
<div class="download-container">
<br>
<div class="download-cell">
<a target="_blank" class="module" href="http://www.wordpress.com">
<img src="Images/wordpress.png" style="width:60px; height:60px;" />
WordPress
</a>
</div>
<div class="download-cell">
<a target="_blank" class="module" href="http://drupal.org">
<img src="Images/drupal.png" style="width:60px; height:60px;" />
Drupal
</a>
</div>
<div class="download-cell">
<a target="_blank" class="module" href="http://www.joomla.com">
<img src="Images/joomla.png" style="width:60px; height:60px;" />
Joomla
</a>
</div>
<div class="download-cell">
<a target="_blank" class="module" href="http://www.squarespace.com">
<img src="Images/squarespace.png" style="width:60px; height:60px;" />
Squarespace
</a>
</div>
<div class="download-cell">
<a target="_blank" class="module" href="http://www.volusion.com">
<img src="Images/volusion.png" style="width:60px; height:60px;" />
Volusion
</a>
</div>
<div class="download-cell">
<a target="_blank" class="module" href="http://www.bigcommerce.com">
<img src="Images/bigcommerce.png" style="width:60px; height:60px;" />
BigCommerce
</a>
</div>
<div class="download-cell">
<a target="_blank" class="module" href="http://www.mystore.com">
<img src="Images/mystore.png" style="width:60px; height:60px;" />
MyStore eCommerce
</a>
</div>
</div>
</body>
</html>
My challenge involves implementing a new AJAX upload feature to insert a data element from the onClick event in multiple rows. The issue I am facing is that it works fine for the first row, but when I add subsequent rows, the function no longer works upon ...
I'm currently dealing with a coding issue where I need to pass a link text within a hyperlink to another page. The web application is built using Express. On one of the pages, there's a dropdown list containing this hyperlink: <a class=" ...
While working with Bootstrap 4, I noticed that the a tag is being displayed before the button when using the following code. Can anyone explain why? <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#navbar ...
After building my News Website using Next.js with Server Side Rendering, I encountered an issue with setting the page title. Despite using export const metadata = { title: "TEST" }, the title remained unchanged. The metadata object appears to be ...
I'm looking to streamline the amount of code needed in my view and aiming to achieve this directly in my HTML file: {% for committee in c %} {% for article in Article.objects.filter(committee=committee) %} <a class="post-link" hre ...
I am trying to extract a name from a public Linkedin URL using Python requests (2.7). Previously, the code was functioning correctly. import requests from bs4 import BeautifulSoup url = "https://www.linkedin.com/in/linustorvalds" html = requests.get(url ...
Check out the following code snippet: .startanimation { height: 100px; width: 100px; background: yellow; -webkit-animation: animate 1s infinite; } @-webkit-keyframes animate { 100% { width: 300px; height: 300px; } ...
My goal is to modify the text value of an HTML code using jQuery... <div class="dropdown"> <button type="button" class="btn btn-secondary dropdown-toggle button-text" data-toggle="dropdown><span>1395</span></button> ...
There are 2 major concerns I have regarding this layout : .feature_content (with a grey background) does not adjust its height and width to different screen sizes. Currently, on large screens, .feature_content is positioned far from the footer. There is ...
I'm having some trouble with the jquery-confirm plugin from . Everything seems to be working fine, but when I try to delete an item, the jquery pops up an alert. However, when I click "okay", it doesn't actually delete the item. I can't figu ...
http://jsfiddle.net/Bzpj4/ The situation depicted in the DIV above is quite puzzling. A 120x120 image is contained within a 120x120 DIV, which is then placed inside a larger DIV with a height of 120px. Strangely, the image within the larger DIV seems to b ...
Trying my hand at canvas for the first time to create a game. I have an image displaying, but strangely the fillStyle method doesn't seem to be working as expected (the canvas background remains white in Google Chrome). Just a note that in my code, t ...
Despite encountering similar or potentially identical questions, I have attempted the suggested solutions without success. My aim is to design a table that centers text both vertically and horizontally, ideally using flex. However, the structure of the ta ...
Currently, I am in the process of developing a Chrome app and have implemented CSS from a previous post. The main issue I am facing is with the textarea element that I am using. I am open to exploring alternative solutions to achieve the desired outcome. S ...
Could someone assist me in hiding this div-container for a brief period of 2 seconds? If you have any alternative suggestions, feel free to share them but, please refrain from using jQuery or JavaScript. #vcontainer { height: 450px; width: 100%; ba ...
Struggling to extract a URL from Tripadvisor.com's search results using its element, my attempts have proven futile so far. Check out the code snippet below: from selenium.webdriver.common.keys import Keys from selenium import webdriver from seleniu ...
I am currently working on a like system and I have made some progress. However, I am struggling to make it so that the likes only increment once. Does anyone have any insights or suggestions on how to achieve this? I have considered using session variables ...
I have a form on a page with multiple text inputs In addition to the form, I have implemented Zend pagination to allow users to select results. However, when using Zend paginate, the user's form inputs are lost because it is not submitted. Since th ...
After borrowing some basic HTML, CSS, and JavaScript code from CodePen, I ran into an issue while attempting to convert it to React. The error message says that it cannot read properties of null (specifically 'dataset'). Here is the JavaScript c ...
Is it a grave error in this layout that H1 isn't the first rendered head element? Is there any way to correct this issue? Given that both columns have variable lengths, I am struggling to find a workaround. Reference I was requested to provide a ref ...