Center vertical inside header and cover the page - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Header

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Header

Description

Center vertical inside header and cover the page

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

html, body {
   margin: 0;
   padding: 0;
   font-size: 16px;
}
header {<!--from   w  w w  . j  a  va2s.  c  o m-->
   background: red;
   color: #fff;
   padding: 0.5em;
}
header h1 {
   font-size: 2em;
   margin: 0 0 0.2em;
}
header p {
   margin: 0;
}
header button {
   height: 40px;
   width: 70px;
}
.column-left {
   display:inline-block;
   width: 70%;
   vertical-align: middle;
}
.column-right {
   width: 29%;
   text-align: right;
   display: inline-block;
   vertical-align: middle;
   height: 100%;
}
@media (min-width: 200px) {
   header {
      padding: 1em;
   }
}
@media (min-width: 300px) {
   header {
      padding: 1.5em;
   }
}
@media (min-width: 400px) {
   header {
      padding: 2em;
   }
}
@media (min-width: 500px) {
   header {
      padding: 2.5em;
   }
}
@media (min-width: 600px) {
   header {
      padding: 3em;
   }
}
.clearfix:after {
   content: ".";
   clear: both;
   display: block;
   visibility: hidden;
   height: 0px;
}


      </style> 
 </head> 
 <body> 
  <header class="clearfix"> 
   <div class="column-left"> 
    <h1>Perfect fit.</h1> 
    <p class="subheading">Even when resized.</p> 
   </div> 
   <div class="column-right"> 
    <button>vertical centered</button> 
   </div> 
  </header>  
 </body>
</html>

Related Tutorials