Align a flex item at the center of its parent when the parent has a flex direction of column

My challenge is aligning a flex item vertically within the remaining space allocated to it.

This is my current code snippet:

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="82e0ededf6f1f6f0e3f2c2b7acb3acb1">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">


<div class="parent d-flex flex-column py-2">

  <div class="container p-0 flex-grow-1">
    <div class="mb-1 d-flex justify-content-center">
      <img src="https://dummyimage.com/300x200/000/fff"></img>
      <!-- need to vertically center this image -->
    </div>
  </div>
  <div class="container p-0 flex-grow-1">
    <div class="mb-1 d-flex justify-content-center">
      Suspendisse non nisl sit amet velit hendrerit rutrum. Vestibulum fringilla pede sit amet augue. Praesent nec nisl a purus blandit viverra. Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. Proin viverra, ligula sit amet ultrices semper, ligula
      arcu tristique sapien, a accumsan nisi mauris ac eros. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam. Aenean imperdiet. Maecenas nec odio et ante tincidunt tempus. Praesent nonummy mi in odio. Nulla consequat massa quis
      enim. Morbi mollis tellus ac sapien. In turpis. Curabitur suscipit suscipit tellus. Cras id dui. Mauris turpis nunc, blandit et, volutpat molestie, porta ut, ligula. Curabitur suscipit suscipit tellus. Nullam nulla eros, ultricies sit amet, nonummy
      id, imperdiet feugiat, pede. Aenean viverra rhoncus pede. Maecenas nec odio et ante tincidunt tempus. Vivamus consectetuer hendrerit lacus.
    </div>
  </div>

</div>

I've been attempting to vertically center the image within its container using properties like align-items-center, align-self-center, and justify-content-center due to the column direction but haven't had any success. The image still remains at the top of the container.

csstwitter-bootstrapbootstrap-4flexbox

Answer №1

UPDATE:

I realized that in your code example, the content is just a part of the page on the right side. To address this, I adjusted the height of the .parent block to make it stretch accordingly.

The key takeaway here is that BS5 .container does not have flex properties by default. Adding the .d-flex class with display: flex; property is necessary to handle it in a flexible manner. Refer to the code comments for further details.

/* simulate parent height */
.parent {
  min-height: 1000px;
}

/* show containers' area */
.container {
  border: 1px solid;
}

/* code for Option-2 */
/* :first-of-type - will be applied only for first .container */
.parent.parent--tmp > .container:first-of-type {
  display: flex;
  align-items: center;
  justify-content: center;
}

Old answer:

You can refer to the BS grid system and alignment documentation for creating two rows.

.parent.d-flex {
  flex-direction: row !important;
}

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

Jquery animate not working properly after closing the div for the first time

I am currently working with a div that utilizes the .animate function. The CSS for the div is set as follows: position:fixed; bottom:-240px; The associated animate script looks like this: $("#media").click(function () { $("#mediadetails").animate({ ...

javascriptjqueryhtmlcssjquery-animate

Unable to properly shut the sliding-over modal

I have implemented a customized version of the codrops slide & push menu (http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/) to create an overlay on my webpage. However, I am facing difficulty in closing it using another link. Any assistance on ...

jqueryhtmlcss

Why does my Node.js server-hosted site get downloaded as a file by IE9, Opera, and older versions of Safari?

I'm feeling completely stuck. This whole situation just doesn't make any sense to me. Even though I'm new to HTML5, CSS, and Javascript, I've put together what I think is a decent (albeit unfinished) website design and a simple (also u ...

htmlcssnode.js

Content hidden by spoiler buttons may overlap with other spoiler buttons

I've created some spoilers that reveal information when clicked on. When I clicked on spoiler1, the content slid underneath the other spoilers strangely. Here's an example of what happened: http://gyazo.com/4571423534e2442dc960d119c668dfa8 Why ...

jquerycssposition

Troubleshooting Problems with a Dynamic Menu

Hello, I have successfully implemented a responsive menu system on my website. However, I am now looking to rearrange the URLs in a different way. Please refer to my dropdown menu example here: http://jsfiddle.net/Et2HB/ What I am trying to achieve is to ...

jquerycsshtmlresponsive-design

App.jsx line 11 is throwing an error due to an undefined property 'TodoComponent'

While attempting to style a ReactJS component, I encountered an error in my browser's development console: App.jsx:11 Uncaught TypeError: Cannot read property 'TodoComponent' of undefined at App.render (App.jsx:11) I have tried imp ...

cssreactjswebpackimportcompilation

Animated dropdown feature spanning the entire width of the screen

I successfully developed a basic dropdown menu with full-width sub-menu functionality. Check it out on jsFiddle: $(document).ready(function(){ $(".drop").hide(); $(".link-1").mouseenter(function(){ $('.link-1-drop').slide ...

javascriptjqueryhtmlcssdrop-down-menu

Utilizing PHP Code within Inline CSS in HTML guides

Is it possible to integrate PHP code into Inline CSS? Here is an example: Check out this code snippet: <div class="col-auto"> <div class="h5 mb-0 mr-3 font-weight-bold text-gray-800">%22</div> </div> <div ...

phphtmlcssbootstrap-4

What are alternative ways to divide CSS without relying on CSS-in-JS and CSS modules?

Recently, I transitioned to next.js and I'm eager to develop an application with CSS styles without resorting to css-in-js or inline styling. In my exploration, I've come across two potential options: using CSS modules or importing global styles ...

cssnext.js

Leveraging JavaScript code repeatedly

Apologies if this question has been asked before, as I couldn't find it. I have an HTML table with images used as buttons: <td> <button class="trigger"> <img src="D:\Elly Research\ CO2858\Presentation\Calypso ...

javascripthtmlcss

CSS tip: Keep the bottom of the screen always visible in an overflow window

My webpage has a continuously updating element where new data is added to the bottom. I currently have 'overflow: scroll' enabled for users to manually scroll down and view this new information. However, I am looking for a way to display these up ...

cssscrolloverflow

Unable to set child element to match parent element's height in Internet Explorer

Attempting to make a child element of a table cell inherit the height and width of the table cell through CSS. Below is the HTML provided: <tr> <td> <div class="yellowDiv"></div> </td> <td></td> ...

htmlcssinternet-explorer

The issue with the functionality of position absolute in CSS when used with JavaScript

<html> <head> <style> #wrapper{ position: absolute; top : 250px; width: 500px; height: 500px; border: 1px solid red; } .tagging{ position: absolute; border: 1px solid black; width : 20px; height: 30px; } & ...

javascriptcss

Responsive Text in HTML Email Depending on Device

I currently have an email template that is functioning perfectly, but I am looking to take it to the next level. The top navigation of the email consists of 4 columns of text. To ensure that it appears well on both desktop and mobile devices, the font size ...

htmlcssmedia-querieshtml-emailemail-templates

Navbar currently active does not switch when moving to a different page

I'm experiencing some issues with the Navbar on my website. I want the active tab to change as users navigate through the different pages. Since I'm using a base template, I don't want to duplicate the navbar HTML/CSS for each page, so I th ...

javascripthtmlcssdjangobootstrap-4

Unexpected symbols appearing in image tag after AJAX response

I'm currently grappling with an issue related to an AJAX request I am working on (I am quite new to the world of AJAX). I have set up an API and my goal is to fetch a PNG image using an Authorization header that requires a token supplied by me (which ...

javascriptjqueryhtmlcssajax

Using javascript to color in cells of a grid of "pixels"

I have a project similar to an Etch-a-Sketch in progress. The main challenge I am currently facing is how to gradually darken each cell of the grid with every pass of the mouse cursor, based on the opacity of the cell being hovered over. When the grid cell ...

javascripthtmlcss

What could be causing my CSS external stylesheet to display in Chrome but not in IE?

I'm facing an issue with my index.php file and the accompanying style.css file in the same folder. Despite trying to link my external stylesheet in the HTML, it refuses to display properly. Can someone please help me troubleshoot? It seems like a stra ...

phphtmlcss

In ReactJS, it has been observed that the Checkbox consistently displays as true, but

I am facing a very specific issue. The checkbox with controlled component is functioning correctly on my local machine, but when I deploy the code online, it seems to have a problem. While everything else works fine (check/uncheck) and the data values are ...

reactjscheckboxbootstrap-4

Determination of an arc trajectory using JavaScript

I have been trying to figure out how to replicate this effect. The Red arrowhead remains stationary while the background features a curved path. Currently, I am adjusting the background position to give the illusion of the arrowhead moving along the curved ...

javascriptjqueryhtmlcss