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

Manipulate an image with PHP and jQuery to rotate it, then store the edited image in a specified destination directory

This is not just a question, but an opportunity to share knowledge with many like-minded individuals. After spending hours working on rotating images dynamically using PHP and jQuery, I have come up with a solution that I believe will benefit others in the ...

phpjqueryhtmljson

Bootstrap: Create a square by setting the height equal to the width of the .span2 element

I'm looking to create a div that is the height of a ".span2" (essentially a square) and is also responsive. Here's what I have so far: <div class="span2 square>Hello</div> .span {height: @span2;} However, I haven't been able to ...

csstwitter-bootstrap

Toggle Visibility of Elements with Javascript and Html

I've been working on implementing a "Show All / Hide All" feature. Currently, clicking on the text opens the image and text individually. However, I am looking to add a functionality for expanding all divs at once. To see how it currently functions, ...

javascriptjqueryhtmlhideshow

How can I insert an empty option following a selected value in a dropdown menu using jQuery?

How to use jQuery to insert a blank option after an existing option? I attempted to add a blank option, but it ended up at the top of the dropdown. I actually need one existing option followed by one blank option. For example: <option></option& ...

javascriptjqueryhtmldropdown

CanJS utilizes mustache templates to escape HTML tags

I have a requirement to present a series of choices to the user. I am using a mustache template along with the CanJS JavaScript framework to showcase these options. The problem arises when attempting to display an option such as: Potato Rs. 12 The mustac ...

javascripthtmlmustachecanjscanjs-view

Transforming HTML into a Console Experience (Angular 16)

I'm experimenting with creating a console/CLI style experience using HTML. The goal is to have the input fixed at the bottom of the window, while commands and output rise up from the bottom and eventually disappear off the top of the screen, enabling ...

javascripthtmlcssangular

Basic animation feature malfunctioning

So, I'm really new to this whole HTML5 canvas thing and I'm trying to make a pixel move across the screen with an additive tail behind it. The idea is for the tail to scroll away once it reaches a certain point while the pixel continues moving. I ...

javascripthtmldhtml

Tips for creating fully stretched columns within Bootstrap framework

I have a simple code example available on codepen, but here is the markup for convenience: <div class="container my-container"> <div class="row m-row justify-content-between"> <div class="col-2 my-col">One of three columns</div& ...

cssbootstrap-4bootstrap-grid

I have tried using justify-content: center; and align-items: center; to center this div, but the container div is still not centered. How can I successfully center

I am having trouble centering the container in my HTML code HTML code:- <body> <div class="container"> <div class="image"> <img src="./images/image-qr-code.png" alt="qrcode"> & ...

htmlcsswebfrontend

Learn how to utilize the getElementByClassName method in JavaScript to insert checkboxes into two lists that share the same class name

I have a situation where I have two lists sharing the same class name. I need to dynamically create checkboxes in both of these lists based on XML data. My current dilemma lies in how to properly utilize getElementByClassName in JavaScript to add checkbox ...

javascriptjqueryhtml

Discovering elements with Selenium

While using selenium, I stumbled upon this web element: <td style="padding-right: 10px; " **onclick="javascript:show_me('CarDetails.php?CarID=2358912&SubCatID=1**', '2358912', 560, 'ActiveLinkVisited');stat( '../& ...

javajavascripthtmldomselenium

Fancybox overlay not adjusting to full height

When working with JavaScript: $(document).ready(function() { $(".fancybox").fancybox({ helpers: { overlay: { opacity: 0.4, css: { 'background-color': '#FFF' ...

jqueryhtmlcssfancyboxfancybox-2

Is there a way to customize the default settings for a blueprint’s menu item?

In my react project, I implemented the Menu using MenuItem from '@blueprintjs/core'. The issue I encountered is that when hovering over a Menu item with children, they open from the right side. Is there a way to modify this behavior and have the ...

htmlcssreactjsstyled-componentsblueprint

What is the process for extracting the differences between two or three files and merging them together in Node.js?

Recently, I've been experimenting with webpack and successfully managed to output and transform es5 build to include nomodule in the tags directly from HtmlWebpackPlugin using hooks. Similarly, for the es6 build, I added type="module". Howe ...

javascripthtmlnode.jswebpack

Verify if the second list item contains the "current" class

When displaying a list of blog items on the blog page, I am using grid-column: 1 / -2;. In the first row, the first blog item spans two columns while the second and subsequent rows display three items in each row. This setup works well, but when moving to ...

htmljquerycss

Create a webpage layout using Bootstrap that features a left-aligned image within a div, with

Is there a way to achieve this layout using Bootstrap? View the desired design I am looking to create a div with an image on the left (float:left) and text (which could be one or multiple lines) along with a button aligned to the bottom right. The goal i ...

csstwitter-bootstrapcss-floattwitter-bootstrap-2

What is the most efficient way to define the font properties for all H1-H6 headings in a single declaration

Is there a way to set all font properties for H1-H6 headings in one CSS declaration? CSSLint.net is flagging multiple definitions of heading styles as an issue. I currently have specific styles for each heading level: h1 { font-size: 1.8em; margin-top: ...

csshtmlxhtml

Tips for adding color to the <td> element in an ejs file using nodeJS

I am looking to incorporate a color into my .ejs file. Here is the code snippet I am working with: <% resultList.forEach(function(item, index){ %> <tr> <td><%= item.function %></td> <td><%= item.value %>< ...

javascripthtmlcssnode.jsejs

Rotating Images in Query and Chrome

My script for rotating images is functioning well in various browsers, however, it seems to be experiencing issues specifically with Google Chrome. In order to address this problem, I attempted a CSS3 workaround. Unfortunately, I have encountered difficul ...

jqueryimagecssrotation

Maintain consistent theme across various pages using javascript

So I successfully implemented a dark mode on the front page using the following script (sourced from W3schools) : <script> function darklightmode() { var element = document.body; element.classList.toggle("dmode"); } </script> ...

javascripthtmlcssdarkmode