Div Boxes at the Center

I've searched extensively for a solution to my unique problem, but haven't been able to find one that fits. I have 4 div boxes with a max width of 50% and a min width of 400px. When the site is viewed on a smaller screen, I want the boxes to align vertically rather than horizontally. However, I'm struggling to center the boxes in this vertical alignment.

I've tried using
display: table; margin: 0 auto;
but it hasn't worked. I also attempted wrapping everything in another div and experimenting with different width values like max-content, min-content, auto, and fit-content, but none of these solutions have been successful. Does anyone have an easy workaround?

Here's a simplified version of my issue:

.format {
  width: 50%;
  float: left;
  height: auto;
  min-width: 500px;
  background-color: lightblue;
  display: table;
  margin: 0 auto;
}
<div class="format">
  <p>Head Coach</p>
</div>
<div class="format">
  <p>Under 17</p>
</div>
<div class="format">
  <p>Under 15</p>
</div>
<div class="format">
  <p>Others</p>
</div>

Apologies for any language errors in my message. Hopefully, it was still understandable :)

htmlcss

Answer №1

I suggest utilizing display: flex for centering the elements. To achieve this, place all four divs inside a parent div and implement the following CSS:

.parent-div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

Update Based on Provided Screenshot
In tackling this issue, my strategy would involve incorporating display: flex along with @media query.

.parent-div {
    // Splitting the page into 2 columns through sub-parents
    display: flex;
    align-item: center;
}

.sub-parent{
    display: flex;
    align-items: center;
    flex-direction: column;
}

// When the screen size is less than 768px, switch to flex-direction: column in "parent-div"
@media screen and (max-width: 768px) {
    .parent-div {
        flex-direction: column;
    }
}

<div class="parent-div">
    <div class="sub-parent">
        <div class="format">
            <p>Landestrainer</p>
          </div>
          <div class="format">
            <p>U17</p>
          </div>
    </div>
    <div class="sub-parent">
        <div class="format">
            <p>U15</p>
        </div>
        <div class="format">
            <p>Sonstige</p>
        </div>
    </div>
</div>

Explore more about using CSS display: flex: Flexbox Guide

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

Embedding PHP code within inline styles

Is it possible to incorporate a variable inside my progress bar? I want the progress to change based on the status of each project ($projek), but inserting the variable directly into the style attribute doesn't seem to be working. Here's the code ...

phphtmllaravel

Deletion of ::before and ::after pseudo-elements upon addition of the class is-sticky

One issue I'm facing is that when the class is-sticky is applied to my menu, the ::before and ::after pseudo-elements on my logo become unnecessary. As I am not very proficient in JQuery, I have been unable to resolve this by searching online. The HT ...

htmljquerycssversion-control

What is the best way to convert my JSON data to HTML using JavaScript?

My dilemma seems to be rooted in the use of backticks. Strangely, an error keeps popping up whenever I try to employ them in my IDE (Brackets). I attempted solutions by testing directly in my Browser and through NotePad++, but unfortunately, nothing seeme ...

javascripthtmljson

Animation of CSS elements sliding up on the page, with the element briefly appearing before the slide begins

My CSS animation involves a page scrolling from the bottom to the top when selected. The problem I'm facing is that the page briefly appears in its top position before disappearing to scroll from the bottom to the top. How can I prevent the page from ...

csscss-animations

Is there a way to determine the names of the functions that are being called?

I'm working on mastering Google Development Tools. Is there a way to determine which specific functions, especially those in Javascript, are needed before a page can load successfully? ...

javascripthtmlconsoleload

struggling to find the precise value in the array

my original result is displayed below: [status] => 1 [schedule_status] => 1 [cid] =>3 [cdate] => 16-10-18 01:10:52 [did] => 16 [jid] => 4 However, when I try to extract individual array values using the following code: $count = count($ ...

phpjqueryhtmlajax

Troubleshooting problems with anchor-targets in Skrollr

I am experimenting with having divs overlap each other as the page is scrolled using Skrollr. Initially, I was able to achieve the desired effect with two divs. However, when trying to incorporate a third div, only the first and last ones seem to work prop ...

javascriptjqueryhtmlcssparallax

Having difficulty toggling a <div> element with jQuery

I am attempting to implement a button that toggles the visibility of a div containing replies to comments. My goal is to have the ability to hide and display the replies by clicking the button. The "show all replies" button should only appear if there are ...

javascriptjqueryhtmlcss

Having issues with contenteditable functionality not functioning properly on elements that are dynamically generated

Creating an unordered list dynamically and adding items to it on a button click. Appending it to a section with contenteditable set to true, but encountering issues. The code snippet below demonstrates the process: // Create text input var categoryInput = ...

javascripthtmlcontenteditable

Issues with IE9's CSS hover functionality are causing problems

This particular css style functions well on most browsers, but seems to have compatibility issues with Explorer 9 specifically when it comes to the :hover effect. There are instances where it works perfectly fine and other times when it doesn't work a ...

htmlcssinternet-explorer-9

Ensure that the Javascript file is included before the CSS file to prevent any margin

I have external files for JavaScript and CSS. According to This question, they suggested that including JavaScript before CSS could enhance performance. However, I noticed a discrepancy in Chrome when I load JS before CSS - the .offset() function returns a ...

jquerycssgoogle-chromeoffset

What seems to be the issue with my code for Javascript Math functions?

Welcome to the number game slider! If you roll above 50, you will get double the amount bet. Use the slider to choose your desired betting amount. Issue 1: After a win, the score does not update correctly. Instead of showing increments of 5, it displays s ...

javascripthtml

Using Angular 8 to Pass Form Data to Another Component via a Service

Is there a way to send all the Formgroup data as a Service in Angular to Another Component without using ControlValueAccessor? I want the receiver to automatically receive the value data whenever someone enters information on a form. I am attempting to mo ...

htmlcssangularangular8

Dropdown menu with CSS arrow

I'm attempting to create something similar to this: Here's what I have so far: Html: <div class="panel-heading" data-toggle="collapse" href="#data2"> <div class="heading"> APPLICATION </div> <span clas ...

htmlcss

Issues with keyboard accessibility in drop down menus

Looking to improve the keyboard accessibility of my menu bar. Swapped out all instances of :hover with :focus, but unfortunately dropdown menus are still not accessible via keyboard. Does anyone have a solution for this issue? Appreciate any help! ...

htmlcssaccessibility

Is there a way to remove the initial number entered on a calculator's display in order to prevent the second number from being added onto the first one?

I am currently in the process of developing a calculator using HTML, CSS, and JavaScript. However, I have encountered an issue with my code. After a user inputs a number and then clicks on an operator, the operator remains highlighted until the user inputs ...

javascripthtmlcssfrontendcalculator

The previous link is still present in the current URL

Having some trouble with my button code here. I'm new to HTML and I have a button that references another HTML file using a parameter. <a class="btn btn-primary" role="button" href="reto_resultado/{{ clave_primaria }}">Check</a> The issu ...

htmldjango

When using Vue.js, the class binding feature may not function properly if it is referencing another data property that has variants

I am currently developing a basic TODO application. Within my index.html file, I have a main div with the id #app. Inside this div, there is another div with the class .todobox where I intend to display different tasks stored in my main.js file. Each task ...

javascriptcssvue.jsvuejs2vue-component

Set the div to have a position of absolute, disregarding any other parent divs that may also have position absolute set

Is there a way to bring an outsider class <div> to the front of all others, even when all <div> elements are set as position: absolute;? How can the .free-object, which is inside .left, overlap both .left and .right? I have tried using z-ind ...

css

Display substitute text for the date input field

When using input types date and datetime-local, the placeholder attribute does not work directly. <input type="date" placeholder="Date" /> <input type="datetime-local" placeholder="Date" /> Instead, the ...

htmldateplaceholder