Constantly centered div

I'm dealing with a situation like this:

.center_position_div{
    width:100%;
    background-color:green;
    display: flex;
    flex-wrap: wrap;
}

.show_running_exam
{
    width: 22%;
    background-color:aliceblue;
    margin-left: 1%;
    margin-right: 1%;
    margin-bottom: 5px;
    margin-top: 6px;
    overflow: hidden;
}
<div class="center_position_div">
        <div class="show_running_exam">saddsdsadsdsdf dsfsdfd sfdsfdsfsdfd sfdsfsd</div>
        <div class="show_running_exam">saddsdsadsdsdf dsfsdfd sfdsfdsfsdfd sfdsfsd</div>
        <div class="show_running_exam">saddsdsadsdsdf dsfsdfd sfdsfdsfsdfd sfdsfsd</div>
        <div class="show_running_exam">saddsdsadsdsdf dsfsdfd sfdsfdsfsdfd sfdsfsd</div>
        <div class="show_running_exam">saddsdsadsdsdf dsfsdfd sfdsfdsfsdfd sfdsfsd</div>
        <div class="show_running_exam">saddsdsadsdsdf dsfsdfd sfdsfdsfsdfd sfdsfsd</div>
        <div class="show_running_exam">saddsdsadsdsdf dsfsdfd sfdsfdsfsdfd sfdsfsd</div>
        <div class="show_running_exam">saddsdsadsdsdf dsfsdfd sfdsfdsfsdfd sfdsfsd</div>
        <div class="show_running_exam">saddsdsadsdsdf dsfsdfd sfdsfdsfsdfd sfdsfsd</div>
        <div class="show_running_exam">saddsdsadsdsdf dsfsdfd sfdsfdsfsdfd sfdsfsd</div>


    </div>

Is there a way to center the child divs within the parent div without using "padding-left" or "margin: 0 auto;"? I've tried those but they're not working. Any other suggestions to achieve this?

htmlcss

Answer №1

To achieve the desired content justification, simply add justify-content: center; to the parent container.

.center_position_div {
  width: 100%;
  background-color: green;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.show_running_exam {
  width: 22%;
  background-color: aliceblue;
  margin-left: 1%;
  margin-right: 1%;
  margin-bottom: 5px;
  margin-top: 6px;
  overflow: hidden;
}
<div class="center_position_div">
  <div class="show_running_exam">saddsdsadsdsdf dsfsdfd sfdsfdsfsdfd sfdsfsd</div>
  <div class="show_running_exam">saddsdsadsdsdf dsfsdfd sfdsfdsfsdfd sfdsfsd</div>
  <div class="show_running_exam">saddsdsadsdsdf dsfsdfd sfdsfdsfsdfd sfdsfsd sfdsfdsfsdfd sfdsfsd sfdsfdsfsdfd sfdsfsd</div>
  <div class="show_running_exam">saddsdsadsdsdf dsfsdfd sfdsfdsfsdfd sfdsfsd</div>
  <div class="show_running_exam">saddsdsadsdsdf dsfsdfd sfdsfdsfsdfd sfdsfsd</div>
  <div class="show_running_exam">saddsdsadsdsdf dsfsdfd sfdsfdsfsdfd sfdsfsd</div>
  <div class="show_running_exam">saddsdsadsdsdf dsfsdfd sfdsfdsfsdfd sfdsfsd</div>
  <div class="show_running_exam">saddsdsadsdsdf dsfsdfd sfdsfdsfsdfd sfdsfsd</div>
  <div class="show_running_exam">saddsdsadsdsdf dsfsdfd sfdsfdsfsdfd sfdsfsd</div>
  <div class="show_running_exam">saddsdsadsdsdf dsfsdfd sfdsfdsfsdfd sfdsfsd</div>


</div>

Answer №2

Were you searching for this content?

.center_position_div{
        width:100%;
        background-color:green;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
    }
    
    .show_running_exam
    {
        width: 22%;
        background-color:aliceblue;
        margin-left: 1%;
        margin-right: 1%;
        margin-bottom: 5px;
        margin-top: 6px;
        overflow: hidden;
    }
<div class="center_position_div">
        <div class="show_running_exam">saddsdsadsdsdf dsfsdfd sfdsfdsfsdfd sfdsfsd</div>
        <div class="show_running_exam">saddsdsadsdsdf dsfsdfd sfdsfdsfsdfd sfdsfsd</div>
        <div class="show_running_exam">saddsdsadsdsdf dsfsdfd sfdsfdsfsdfd sfdsfsd</div>
        <div class="show_running_exam">saddsdsadsdsdf dsfsdfd sfdsfdsfsdfd sfdsfsd</div>
        <div class="show_running_exam">saddsdsadsdsdf dsfsdfd sfdsfdsfsdfd sfdsfsd</div>
        <div class="show_running_exam">saddsdsadsdsdf dsfsdfd sfdsfdsfsdfd sfdsfsd</div>
        <div class="show_running_exam">saddsdsadsdsdf dsfsdfd sfdsfdsfsdfd sfdsfsd</div>
        <div class="show_running_exam">saddsdsadsdsdf dsfsdfd sfdsfdsfsdfd sfdsfsd</div>
        <div class="show_running_exam">saddsdsadsdsdf dsfsdfd sfdsfdsfsdfd sfdsfsd</div>
        <div class="show_running_exam">saddsdsadsdsdf dsfsdfd sfdsfdsfsdfd sfdsfsd</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 ensuring v-tabs-items and v-tab-item fill height

I found an example that I am trying to follow at the following link: https://vuetifyjs.com/en/components/tabs#content <v-tabs-items v-model="model"> <v-tab-item v-for="i in 3" :key="i" :value="`tab-${i}`" > < ...

cssvue.jsvuetify.js

Increasing a local variable in the view using ASP.NET

Despite its seeming simplicity, I'm struggling to find the solution to this problem. When adding a number (like 2) to a page variable, it's being recognized as a string and displaying: instead of 3 : 1+2 @{ var page= 1 ; } <li>@ ...

htmlasp.net.netrazor

Is it possible to scroll a div on mobile without the need for jQuery plugins?

Upon investigating the initial query, we managed to implement D3js for identifying a scroll event. This allowed us to scroll the div #scroll-content from any location on desktop devices. However, we encountered an issue where this method does not function ...

javascripthtmld3.jsmobilescroll

Issue with plain CSS animation not functioning in NextJS with Tailwind CSS

I found this amazing animation that I'm trying to implement from this link. After moving some of the animation code to Tailwind for a React Component, I noticed that it works perfectly in Storybook but fails to animate when running in next dev. It si ...

cssnext.jscss-animationstailwind-css

Having trouble with the Slide Toggle menu closing unexpectedly?

$('span.nav-btn').click(function () { $('ul#menu').slideToggle(); }) $(window).resize(function () { if ( $(window).width() > 900) { $('ul#menu').removeAttr('style') } }); $('spa ...

javascriptjqueryhtmlcss

CSS issue encountered: "Value of property is not valid"

When working with CSS, I encountered an error stating "Invalid Property Value" while inspecting the transform element of the Service section in the Wall Street theme. Could someone kindly assist me with the necessary steps to rectify this issue? https://i ...

csstransform

Display the entire HTML webpage along with the embedded PDF file within an iframe

I have been tasked with embedding a relatively small PDF file within an HTML page and printing the entire page, including the PDF file inside an iframe. Below is the structure of my HTML page: https://i.stack.imgur.com/1kJZn.png Here is the code I am usin ...

javascripthtmlcsspdfiframe

AngularJS has encountered an error due to exceeding the maximum call stack size limit

Utilizing AngularJS and a web API, I am fetching data from an SQL table. I have designed a function that populates input fields with values when a row is selected from an HTML table. However, I encountered an error during debugging when clicking on any row ...

javascriptangularjshtml

Tips for customizing the background of form inputs in React-Bootstrap

Currently, I have a next.js project with react-bootstrap. I am attempting to change the default blueish gray background color (#e8f0fe or rgb(232, 240, 254)) that bootstrap uses for form inputs to white. To achieve this, I am customizing the bootstrap var ...

cssbootstrap-4sassnext.jsreact-bootstrap

What is the best way to trigger a modal on Bootstrap using a JavaScript/jQuery function?

I encountered an issue while attempting to call a bootstrap modal using a simple button or link, which may be due to a conflict with my select2 plugin (although I am uncertain). I tried appending the button to the select2 dropdown but it doesn't seem ...

javascriptjqueryhtmltwitter-bootstrap

The identification of the field is not being transmitted by ng-select

Looking for help with Angular! I have an ng-select box where I can choose countries, and it's working fine when I select an option and submit - it submits the id as expected. However, when pre-populating the ng-select with data and submitting, it&apos ...

javascripthtmlangulartypescript

Do you create a dedicated CSS file specifically for Internet Explorer?

I am currently exploring the best solution for my current situation. Previously, I utilized CSS3 to create rounded corners and drop shadows, but encountered compatibility issues with IE8. As a result, I had to implement CSS3pie to support IE8. However, th ...

css

Despite utilizing the here() package, Pandoc is unable to locate the image path referenced in an external HTML file that has been imported into R Markdown

As I create an HTML document with R Markdown, I incorporate external HTML documents for headers and footers. Utilizing the here() package enables relative paths within my project. However, including external HTML files via YAML in the R code disrupts the f ...

htmlrr-markdownpandoc

The JavaScript array slideshow is experiencing some glitches in its transition

After diving into JavaScript recently, I managed to center a div and make it fullscreen as the window resizes. However, things got tricky when I added a script I found online to create an image transition using an array. Unfortunately, these scripts are co ...

javascripthtmlcss

Steps to Hide Pop-Up Cookie Module in HTML with Bootstrap 5

Could someone please assist me in figuring out how to close the popup module in bootstrap when the user accepts or cancels? I can't seem to remember how to do it. <div class="cookie-consent"> <span>This site uses cookies to enhan ...

htmlbootstrap-5

The combination of Netbeans 8.0.1 and PhoneGap 3.5.0 is a powerful duo

My system is currently running Netbeans 8.0.1 and PhoneGap 3.5.0, but I am facing an issue where Netbeans does not allow me to create a new PhoneGap/Cordova project. According to some sources, this could be due to PhoneGap changing its versioning format, ...

htmlcordovanetbeansjscript

Styling a numerical value to appear as currency with CSS

Is there a way to style the content of an element as currency using just CSS? It would be great to know if we can control how the value is displayed with CSS. I haven't found anything yet, so not getting my hopes up :) <!DOCTYPE html> <html& ...

htmlcssformat

Uncovering secret divs with the power of jQuery timing upon reload

Currently, I am in the process of developing a custom Wordpress theme for my blog which includes an overlay-container. When a button is clicked, this container slides in from the top and pushes down the entire page. To achieve this functionality, I am uti ...

javascriptjquerycsswordpress

The strategy of magnifying and shrinking graphs on Google Finance for better analysis and

I am seeking to understand the logic behind a zoom-able graph similar to the one on Google Finance. I am aware that there are pre-made components available, but I am interested in a simple example that breaks down the underlying logic. ...

javascripthtmlcssajax

Tips for securing data on an aspx page

Forgive me for this seemingly silly question, but, Recently, my client requested encryption for certain information from their payment system in order to prevent users from stealing personal data. The system is web-based and developed using ASP.NET. We&a ...

asp.nethtmlencryptioninformation-hiding