Styling HTML elements using CSS to create a flexbox container with top and center-aligned divs

I'm attempting to design a layout where the top and center aligned divs.

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

My approach is somewhat successful: https://jsfiddle.net/zeo29uLa/

<div class="flexbox-container">
  <div class="top-item">
    top
  </div>
  <div class="center-item">
    center
  </div>
</div>

<style>
  body {
    height: 50vh;
  }
  .top-item {
    flex: 1 0 100%;
    text-align: center;
    align-self: flex-start;
  }
  .center-item {
    align-self: center;
  }
  .flexbox-container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;

    justify-content: center;
    height: 100%;
    flex-wrap: wrap;
  }
</style>

My issue and therefore my question: how can I accurately align the center div in the middle? Currently, there is space above it causing it to align below the desired height.

I have a hunch that resolving this will involve utilizing align-content correctly within the parent container, but I'm struggling to nail down the solution.

htmlcssflexboxcss-position

Answer №1

To align the top-item in a centered position, you can set its positioning to absolute and then apply align-content: center to the flexbox container. Take a look at the demonstration provided below:

  body {
    height: 50vh;
    background: blue;
  }
  .top-item {
    flex: 1 0 100%;
    text-align: center;
    align-self: flex-start;
    position: absolute; /* ADDED */
  }
  .center-item {
    align-self: center;
  }
  .flexbox-container {
    display: flex;
    background: green;
    justify-content: center;
    height: 100%;
    flex-wrap: wrap;
    align-content: center; /* ADDED */
    position: relative; /* ADDED */
  }
<div class="flexbox-container">
  <div class="top-item">
    top
  </div>
  <div class="center-item">
    center
  </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

Media queries do not trigger the execution of CSS code

I am currently working on making a desktop-sized website responsive. However, I have encountered an issue where the CSS rule is being read by the browser but not executed, regardless of whether the media query rule is true or not. I have already included & ...

cssmedia-queriesresponsive

Unable to retrieve CSS file on JSP page

My challenge right now is linking CSS with the JSP page. I have attempted it like this: <link href="<c:url value="/resources/css/plugins.css" />" rel="stylesheet"> <link href="<c:url value=" ...

cssjsp

The process of embedding one script into another script is underway

I've been struggling to optimize the loading of a responsive/mobile page, but then I came across a jQuery plugin that dynamically toggles elements based on screen width. This seemed like the perfect solution as it eliminates the need for extra HTTP re ...

javascriptjqueryhtml

Stopping the Stroke Animation in CSS at the Final Frame of the SVG

Check out this CodePen The SVG in the codepen above has a stroke that animates into view, but unfortunately disappears at the end of the animation. Is there a way to make sure it stays visible once it's fully loaded? .path { stroke-dasharray: 100 ...

csssvg

Stopping the use of <script> tags within HTML form submissions

After launching my website at , I discovered that a user is attempting to redirect it to different websites using HTML form input tags. While I'm unsure of the exact method they are employing, I am seeking a way to block users from entering these nefa ...

javascripthtmlformssecurityxss

What is the method for applying a prefix to component tags in Vue.js?

Currently, I am tackling a project that was passed down to me and have noticed numerous <p-xxxx> tags scattered throughout the codebase, such as <p-page :has-something="val1" :has-another="val2" />, etc. (For example: CompName --> After a b ...

javascripthtmlvue.jsvuejs2

What is the most effective method for sharing features while maintaining unique aesthetics?

In the process of developing a Next.js website, I've encountered a challenge: I have 3 forms that function in similar ways but have different styles. Instead of duplicating code for each form, I'm looking for a way to build the form structure on ...

javascriptcssreactjsfrontendstyled-components

Setting the height and width to 100% causes the element to slightly protrude

After setting the height and width of a canvas to 100%, I noticed that instead of fitting the screen perfectly, it slightly exceeded the boundaries, causing a scroll bar to appear allowing me to scroll just a few pixels up, down, left, or right, even after ...

htmlcss

Arranging elements in HTML for Manipulating with JavaScript

I haven't started coding yet, but I'm contemplating the overall strategy. My front end is primarily composed of HTML tables, giving it an Excel-like appearance. I am considering generating default pages and then using JavaScript to dynamically m ...

javascripthtmlcss

Tips for concealing the final click (add) tab after it has been clicked and revealing the hidden (add) button when the user clicks on the remove button

I have created a form where users can add tests. Everything is working smoothly but I want the previous "Add Another Test" field to be removed when the user clicks on it and a new field to be shown. Everything is running well, but the issue is that when t ...

javascriptjqueryhtmlcss

What is the best way to stop a UL element from inheriting the height properties of a drop down menu?

My sticky navigation bar is almost finished in terms of appearance and functionality. However, I encountered an issue when adding a drop-down menu within the links – it creates an invisible field that hides nearby text. Upon investigation, I found that t ...

javascriptjqueryhtmlcssdrop-down-menu

Utilize Ajax to open and close an HTML tag within separate div elements

I am facing a challenge in my project where I have to dynamically open and close a form using ajax. The form needs to be opened within a div, and then closed in another div below it like the following: Opening form (header div) $('#header').h ...

javascriptjqueryhtmlajax

Animating SVG from upper left corner to lower right corner

I am looking to create an animation on this SVG that starts from the top left and ends at the bottom right, similar to a gif. You can view the example I want to replicate in the following link: body { background: black } path { fill: white; } /* ...

cssanimationsvgsvg-animate

Is it possible to restrict the draggable area?

Looking at this JSFiddle example, there is a box that can be dragged around the body. But, is it feasible to restrict dragging only when the user clicks on the purple section identified by the id "head"? $(document).ready(function(){ $( "#box" ).dra ...

jquerycssjquery-uijquery-ui-draggable

Would you like to justify to the right?

I am attempting to align the final element in a list to the right side: <ul> <li>one</li> <li>two</li> <li>three</li> <li id="right">right?</li> </ul> li { display: inline-bl ...

htmlcsstext-align

What causes the page's styling to break when an external JS file is loaded?

Currently, I am facing a situation where an external javascript file is being loaded onto the page based on a query parameter. The file includes UI components along with their styles. However, upon loading the file, it disrupts the styling of the entire pa ...

csscss-selectors

The outcome of the Javascript Calculator is showing as "Undefined"

I've been attempting to create a calculator using JavaScript, but I'm facing an issue where the 'operate' function keeps returning Undefined, and I can't seem to figure out why. I suspect that the problem lies with the switch state ...

javascripthtml

Vanishing submit button on Internet Explorer 7

Hello there! I'm currently facing an issue with some old code that works perfectly in most browsers except for IE7. In IE7, the submit button mysteriously disappears even though there is still space allocated for it on the page. I've experimented ...

cssbuttoninternet-explorer-7submit

Next.js fails to update the user interface (UI) when there is a change in

In my latest Next.js project, I am working on a feature that involves looping through an array of amenities. Each amenity is displayed in a div element that, when clicked, toggles the active property. The logic behind this functionality is handled by the ...

cssnext.jstoggleuse-statereact-state-management

What is the best way to create a JavaScript function that can be used for multiple expandable cards in HTML and CSS?

I'm dealing with a situation where I have a list of cards, and I want to be able to expand the content individually when clicking on "more info". Can someone offer advice on how to achieve this using Javascript? Check out this CodePen for reference: ...

javascripthtmlcss