Using Flex layout to center vertically and align one div to right horizontally - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Center

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

Description

Using Flex layout to center vertically and align one div to right horizontally

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <style>
.wrap {<!-- w w w  .ja  v a2s . c  o  m-->
   display:flex;
   box-shadow:0 0 0 2px black;
   height:401px;
   align-items:center;
   justify-content:space-between;
}

.wrap>* {
   box-shadow:0 0 0 2px black;
   padding:21px;
}

.nextToLeft {
   margin-right:auto;
}
</style> 
 </head> 
 <body> 
  <div class="wrap"> 
   <div class="left">
     1 
   </div> 
   <div class="nextToLeft">
     2 
   </div> 
   <div class="right">
     3 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials