Make divs equal height in row and keep text vertically center aligned with Flexbox - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Align

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Flex Align

Description

Make divs equal height in row and keep text vertically center aligned with Flexbox

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

.homepage__recent-story{<!--from w w w .  j a  v a 2 s  .  co m-->
   background-color: red;
   margin: 0 0 0 0;
   padding: 42px;
   border-top: 1px solid grey;
   overflow-y: auto;
   overflow-x: scroll;
   display: flex;
   flex-wrap: nowrap;
}
.recent-story__card{
   display: flex;
   flex-direction: column;
   flex: 1;
   background-color: white;
   border-radius: 4px;
   padding: 24px;
   box-sizing: border-box;
   max-width: 300px;
   min-width: 300px;
   color: black;
   box-shadow: 0 0 12px rgba(0,0,0,.03);
   justify-content:center;
}


      </style> 
 </head> 
 <body> 
  <div class="homepage__recent-story"> 
   <div class="recent-story__card"> 
    <p style="text-align: center">Title</p> 
    <p style="text-align: center">Caption</p> 
   </div> 
   <div class="recent-story__card"> 
    <p style="text-align: center">this ia as df as df a s fa sd fa sdf a sd fa sdf a sdf .</p> 
    <p style="text-align: center">this a  asd fas df asd fa sd fa sdf a sdf .</p> 
   </div> 
   <div class="recent-story__card"> 
    <p style="text-align: center">Test</p> 
   </div> 
   <div class="recent-story__card"> 
    <p style="text-align: center">Test</p> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials