Align text to the bottom of Image in flex items - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Align

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

Description

Align text to the bottom of Image in flex items

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">

.flex-container {<!-- www. j a v a2 s  . c o m-->
   display: flex;
   flex-direction: row;
   align-items: flex-end;
}
.flex-boxes {
   flex: 0 0 33.33%; /* NEW */
   border: 2px solid red;
}
.cat {
   width: auto;
}


      </style> 
 </head> 
 <body> 
  <div class="flex-container"> 
   <div class="flex-boxes">
     A 
   </div> 
   <div class="flex-boxes"> 
    <img class="cat" src="https://www.java2s.com/style/demo/Safari.png"> 
   </div> 
   <div class="flex-boxes">
     C 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials