Center button inside grandparent center aligned flex div - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Center

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

Description

Center button inside grandparent center aligned flex div

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width"> 
  <style>
#feature {<!--  w ww  . j  av  a 2 s.  c o m-->
   height:601px;
   position:relative;
   display:flex;
   align-items:center;
   justify-content:center;
}

.top, .bottom {
   text-align:center;
   color:Chartreuse;
   font-size:31px;
   font-family:$titlefont;
   font-size:5rem;
   line-height:7rem;
   letter-spacing:3px;
}

a {
   display:block;
   text-align:center;
   width:221px;
   height:51px;
   line-height:51px;
   padding:0;
   margin:0 auto;
   background-color:yellow;
   padding:16px 51px;
   border-radius:6px;
   color:blue;
   text-transform:uppercase;
   font-family:$font;
   text-shadow:0px 2px 2px pink;
}
</style> 
 </head> 
 <body> 
  <div id="feature"> 
   <div class="container"> 
    <div class="feature-inner"> 
     <h1 class="top">My Title</h1> 
     <h1 class="bottom">My Sub title</h1> 
     <a href="">My button</a> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials