css: centrally align a collection of items that are spaced evenly throughout the group

I have multiple divs inside a container that I want to evenly distribute horizontally:

[container [obj1] [obj2] [obj3] [obj4] ]

Additionally, I would like the container to be centered on the page

My current CSS (stylus) code for the container is as follows:

@media( min-width: 900px ) {
                display: flex;
                width: 830px;
                margin: 0 auto;
                justify-content: space-between;
            }

However, I am experiencing some issues with strange margins and the container not being properly centered on the page. Could this be due to how I am utilizing the display:flex and 'justify-content` properties?

htmlcssflexboxstylus

Answer №1

To perfectly center the .container, you can once again apply the display: flex property to its parent element. Then, utilize align-items: center and justify-content: center to achieve centralized alignment, as illustrated in the following example:

body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  background: yellow;
}

.container {
  display: flex;
  border: 1px solid;
  width: 70%;
  height: 20%;
  align-items: center;
  justify-content: space-between;
}

.child {
  background: red;
  border: 1px solid;
  padding: 6px;
  margin: 0 6px;
}
<div class="container">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
</div>

Answer №2

In this scenario, let's consider a container with a width of 450px. By using justify-content:space-between properly, you can achieve equal spacing between div elements as you suggest.

.container {
  display: flex;
  width: 450px;
  height: 50px;
  margin: 0 auto;
  padding: 2px;
  border: 1px solid black;
  justify-content:space-between;
}

.container div {
  border: 1px solid red;
  margin: 4px;
}
<div class="container">
  <div>1</div>
  <div>small</div>
  <div>very large content</div>
</div>

If you want each div to expand to fill the remaining space while keeping them evenly distributed, use flex-grow:1 and width:calc(100%/3) on the child div elements.

.container {
  display: flex;
  width: 450px;
  height: 50px;
  margin: 0 auto;
  padding: 2px;
  border: 1px solid black;
  justify-content:space-between;
}

.container div {
  border: 1px solid red;
  margin: 4px;
  flex-grow:1;
  width:calc(100%/3);
}
<div class="container">
  <div>1</div>
  <div>small</div>
  <div>very large content</div>
</div>

For responsiveness within a media query, adjust your css as shown below:

@media( min-width: 450px) {
  .container {
    display: flex;
    width: 400px;
    margin: 0 auto;
    justify-content: space-between;
  }
  .container div {
    border: 1px solid red;
    margin: 4px;
    flex-grow: 1;
    width: calc(100%/3);
  }
}
<div class="container">
  <div>1</div>
  <div>small</div>
  <div>very large content</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

Buttons within the Bootstrap carousel caption cannot be clicked

I am currently designing a webpage with a Bootstrap carousel that includes a paragraph caption and two buttons. However, the buttons are not functioning as clickable links - when clicked, nothing happens. {% block body %} <div id ="car-container"> ...

javascripthtmljquerycsstwitter-bootstrap

Choosing a root element in a hierarchy without affecting the chosen style of a child

I am working on a MUI TreeView component that includes Categories as parents and Articles as children. Whenever I select a child item, it gets styled with a "selected" status. However, when I click on a parent item, the previously selected child loses its ...

javascriptcssnext.jsmaterial-uitreeview

The removeAttribute function has the ability to remove the "disabled" attribute, but it does not have the capability to remove

When it comes to my JavaScript code, I have encountered an issue with two specific lines: document.getElementsByName('group')[0].removeAttribute('disabled'); document.getElementsByName('group')[0].removeAttribute('checke ...

javascripthtml

Several features - Second function malfunctioning

The initial inquiry is effective. However, the subsequent one is encountering issues as it is failing to confirm if an email contains the "@" symbol. My attempted solution involved reordering the functions related to email validation. <body onload="ch ...

javascripthtml

Step-by-step guide on duplicating a div a set number of times

I am looking to replicate the entire div multiple times (e.g., on an A4 paper, top left corner, top right corner, bottom left corner, and bottom right corner). <script language="javascript" type='text/javascript'> function updateD ...

javascriptasp.netcss

Elements within the div are overlapping each other

Despite adding margin, my h3 tag and p tag in a div keep overlapping. .title { margin: 0 0 26px; width: 335px; height: 28px; font-size: 24px; font-stretch: normal; font-style: normal; line-height: 36px; letter-spacing: 0; text-align: c ...

htmlcss

Images that adapt to various sizes while maintaining a consistent visual hierarchy

Hey there, I'm struggling to achieve the same row size of images as shown in the example. However, when I adjust the window size, the larger images become smaller than the columns on the left. This has been a challenge for me and I haven't found ...

csszurb-foundation

Synchronize MySQL database structure with HTML5 local storage to enable querying

After researching HTML5 local storage, I am considering mirroring a MySQL database's structure for use in an application that requires a large amount of data for a single user. Why would I want to do this? As a web game developer in my spare time, I ...

phpmysqlhtmllocal-storageabstraction

The interaction of flex-box in the presence of absolute positioning

Hey everyone, I need some help understanding why the flexbox is behaving oddly in this code snippet. 1. <!DOCTYPE html> <html> <head> <style> body{ position: relative; } .container { ...

htmlcssflexbox

Slideshow plugin glitch on Safari and Opera caused by jQuery implementation

My current project involves utilizing a fantastic plugin called Sequence.js for creating animations and transitions with CSS3 based on jQuery. I have set up a simple responsive fadeIn-fadeOut slideshow using this plugin. While everything works smoothly an ...

jquerycsssafarislideshowopera

Exploring the asynchronous for loop functionality in the express.js framework

I'm attempting to use a for loop to display all images. I have stored the paths of the images in an array called Cubeimage. However, when trying to display them using <img>, I encountered an error. How can I write asynchronous code to make it wo ...

javascripthtmlexpressweb

Has the submit button become inactive once it has been inserted into a collapse?

I have recently implemented a collapse feature and inserted a form into it, but unfortunately, the submit buttons are not functioning properly. They are failing to send the data to the PHP file. <div class="container"> <div class= ...

jqueryhtmltwitter-bootstrap

Tips on altering the location path when redirecting to a different page using window.location?

Is it a silly question to ask? I tried looking for the answer on Google but couldn't find it. I'm currently working on a website where users can upload photos or videos, using HTML, CSS, and JavaScript. On the homepage, when a user clicks on a ...

javascripthtmlurlhttp-redirect

Unable to eliminate border from image within label

The following code generates a border that appears to be approximately 1px thick and solid, colored grey around the image. Despite setting the border of the image to none, the border still remains. Here is the code snippet: <label> <img styl ...

htmlcss

Steer clear of moving elements around in d-flex or similar layouts

I am looking to arrange elements in a linear manner with equal spacing between them. While I can achieve this using Bootstrap 5 flex, the spacing changes when the text length of a button is altered. https://i.sstatic.net/kVc8l.png For example, the element ...

htmlcsstwitter-bootstrapbootstrap-5

How to make Firefox create a new line in a contenteditable field

I am working with a contenteditable div that is within a parent div with a floating width of 50%. My goal is to set the max width of the content editable to match the container, even if the text spans multiple lines. Here is the CSS I tried: .editable-con ...

htmlcssfirefoxcontenteditable

Updating image source attributes for all images with HTML Agility

I'm facing an issue where I need to change all src attributes in the HTML code to absolute paths instead of relative paths. I attempted to solve this problem using HTML Agility: string html = "<body><div><img src=\"/folder/a.png&b ...

c#htmlhtml-agility-pack

Modify the CSS styles of inner elements dynamically

Within my code, I have implemented a SplitPane and included a CSS file that contains the following styling rules: .split-pane > .split-pane-divider { -fx-padding: 0 0 0 1; -fx-background-color:-fx-background; } However, during runtime, I e ...

javacssjavafx

Utilizing AJAX to fetch a div element from the dynamically loaded content

After spending the past couple of hours conducting research, I have come up empty-handed. Essentially, my current project involves utilizing AJAX to fetch content from the page: "/API/images.vif" The source code for /API/images.vif is as follows: <div ...

htmlajaxfile

`asp:button displaying without any CSS applied`

asp:Button does not respond to CSS styling. CSS: .TabButton { border: none; background-size: cover; background-repeat: no-repeat; width: 100%; height: 100%; } HTML5: <asp:Button runat="server" Text="Events" CssClass ="TabButton" ...

asp.netcsshtml