Trouble aligning content in CSS? Try using justify-content center for perfect centering!

I am facing an issue with centralizing the content properly. Despite using justify-content:center, the layout breaks.

https://i.sstatic.net/EMiw1.png

When I apply justify-content:center, the layout appears like this:

https://i.sstatic.net/lTJRi.png

Here is the HTML / JSX code snippet:

    <div className={styles.contentBodyTab}>
      <div className={styles.containerBrands}>
        {data.map((item) => (
          <div className={styles.brand} />
        ))}
      </div>
    </div>

And the corresponding CSS (SASS) code:

.contentBodyTab {
  background: red;
}

.containerBrands {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.brand {
   background: chartreuse;
   margin: 2px;
   width: 190px;
   height: 130px;
}
   

Answer №1

UPDATE: My initial response was based on the assumption that your desired outcome was reflected in the first screenshot. If this is not the case, please provide clarification in your post :)

To achieve the desired layout, make sure to include display: flex; and justify-content: flex-start; within the following code snippet:

<div key={String(item)} className={styles.containerBrand}>
  {..}
</div>

The solution is as follows:

.contentBodyTab {
  background: red;
}
.containerBrand {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.brand {
  background: chartreuse;
  margin: 2px;
  width: 190px;
  height: 130px;
  flex-shrink: 0;
  flex-grow: 0;
}
<div class="contentBodyTab">
  <div class="containerBrands">
    <div class="containerBrand">
      <div class="brand"></div>
      <div class="brand"> </ div>
      <div class = "brand"> & lt; / div>
      <div class = "brand"> & lt; / div>
      <div class = "brand"> & lt; / div>
      <div class = "brand"& gt; & lt; / div>
      <div class = "brand"& gt; & lt; / div>
      <div class = "brand"& gt; & lt; / div>
      <div class = "brand"& gt; & lt; / div>
      <div class = "brand"& gt; & lt; / div>
      <div class = "brand"& gt; & lt; / div>
      <div class = "brand"& gt; & lt; / div>
      <div class = "brand"& gt; & lt; / div>
      <div class = "brand"& gt; & lt; / div>
      <div class = "brand"& gt; & lt; / div>
      <div class = "brand"& gt; & lt; / div>
      <div class = "brand"& gt; & lt; / div>
      <div class = "brand"& gt; & lt; / div>
      <div class = "brand"& gt; & lt; / div>
      <div class = "brand"& gt; & lt; / div>
      <div class = "brand"& gt; & lt; / div>
    </div>
  </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

Tips for including HTML in a JSON request in ReactJS

Upon sending the request as shown below, the response was successfully received. { "contractId": "siva8978", "html": "<p>PREFERENCE SHAREHOLDER AGREEMENTTHIS AGREEMENT is made on the&nbsp;$$Contract Start Date$$ BETWEEN&nbsp;CRADLE WEALTH ...

Unable to create circular dots within the Slick Slider widget

While attempting to create a slider with dots, I encountered an issue where the dots appeared as ellipses instead of circles, despite setting the width and height to be the same. For instance, I specified width: 12px; height: 12px; but it resulted in a sha ...

jquery asynchronous image loading technique

Can images be loaded asynchronously while the page is loading? The images will only be displayed when a user clicks on a button, rather than immediately showing up. As a result, I am curious if it's feasible to preload the images in a cache so that th ...

Ensuring only one group is open at a time in jQuery when a new group is opened

I need assistance in getting this functionality to work properly. My goal is to have only the clicked group open, while closing all others that are currently open. Here's a specific example of what I am trying to achieve: var accordionsMenu = $(&apo ...

Manage specific Disclosures with Headless UI Open/Close functionality

I need some help figuring out how to control specific Headless UI Disclosures. Currently, when I open one disclosure, the others also open simultaneously. Here is the current situation: https://i.sstatic.net/c65jT.png What I want to achieve is that when ...

XML, XTL, and HyperText Markup Language (HTML)

I am facing a challenge with transforming a list in an XML file into an HTML view using XSLT. The nesting of the lists is causing issues and the output is not meeting my requirements. XML: <book-part> <list id="ch4list2" list-type="simple"> & ...

Each Browser Approaches Simple Search Fields in its Own Unique Way

In the process of creating a search field with an input field and an svg icon, I encountered different browser behaviors in Chrome, Firefox, and IE11. Chrome – the preferred version https://i.sstatic.net/ikBgD.png Firefox https://i.sstatic.net/9lcqQ.pn ...

The react-redux developer tool appears to be disabled and is not displaying the current state of the application on the extension toolbar

Just finished the redux-tutorial and attempting to view the state in the redux-devtools. However, the redux-devtools seems to be inactive on the extensions bar. Upon clicking it, a menu appears with options like "to right, to left etc". Selecting one of ...

Tips for adding new items to a Masonry Image List using React MUI

As I experiment with utilizing the React MUI Masonry Image List alongside the infinite scroll, I've found that they complement each other quite well. However, a challenge arises when appending new images to the Masonry image list. While I can success ...

Show the input from one HTML form on a different HTML form

Seeking guidance on utilizing local storage in HTML5. How can I extract information from one form and present it on another HTML form page? Picture this: two forms at play here. Upon populating form 1 and hitting the submit button, the content should be v ...

Imitate a keypress within a hidden web browser component using C#

Currently, I am engaged in a project that requires me to navigate a webpage and gather information about products, prices, etc. using the webbrowser object in .NET 3.5. The challenge arises because the page contains fields with an ajax suggest script, mak ...

What is the best way to center align the button on my card?

I am having trouble aligning the "Check Github" button in the center of the card. I have tried using item-align: center;, justify-content:center;, and margin-right: 50px; but none of them seem to work on this particular element. Can you please provide guid ...

Expand a section of the webpage to fill the entire screen

I'm working with some HTML code that looks like this: <header>title</header> <content class="container-fluid"> <div class="row"> <div class="col-sm-3 leftside"> <ul> <li>test</li> ...

Using RadStyleSheetManager for Optimizing CSS Caching

After implementing the RadStyleSheetManager in my master pages using the given code snippet, I noticed a significant improvement in the performance of my web application. In Internet Explorer 8, the number of dynamically generated WebResource.axd files had ...

highlight the selected option in the ng-repeat list of items

Looking for some assistance with a coding problem I'm having. I keep running into an error when trying to make a selected item in an ng-repeat list highlight. The CSS style is only applied on the second click, not the first. Additionally, I need to en ...

How can I ensure that my content stays fixed at the bottom of a scrolling div in Material UI React?

I have developed a React JS component using Material UI that includes a chat input feature. However, I am facing an issue where the width of the chat input is always half the screen size on desktop or mobile devices. When I try to change the width to 100%, ...

Tips for ensuring compatibility of CSS in IE7 and IE8

Despite using the following styles to dynamically display alternative colors in my HTML code, I am facing compatibility issues with IE7 and IE8. Surprisingly, everything works perfectly fine on IE9 and above. It seems these styles are not supported by IE7 ...

The navigation bar extends beyond the container

First time diving into bootstrap and struggling with my items overflowing the container. Here's a snippet of my code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equi ...

Add a class by utilizing the :class attribute

I reviewed the documentation, but I am still struggling to implement this in my project. Initially, I simply want to display a specific class using vue.js that I can later modify dynamically. I just need to establish the default behavior of that class, so ...

Dependency in NPM that imports/includes from the main directory of the application

Imagine creating an application named App, which includes an npm dependency called package. The package requires that the App adheres to a specific file structure: App/ node_modules/ package/ index.js package.json folder/ file.js index.js pac ...