CSS Vertically Align Text in Header - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Header

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

Description

CSS Vertically Align Text in Header

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

#header,<!--  ww w. j  a  v  a2s.  c  o  m-->
#header>div {
   height:141px;
   background:#ccc;
   line-height:141px;
}
#header>span,
#header>div>span{
   display:inline-block;
   line-height:0;
   vertical-align:middle;
}
#header>div {
   float:right;
}
#header h1 {
   font-size:1.7em;
   width:200px;
   text-align:center;
   line-height:26px
}
#header h3 {
   text-align:center;
   color:#e62520;
   font-size:1.7em;
   line-height:26px;
   font-style:italic;
   margin-left:95px
}
#header h3 span {
   font-size:1.2em;
}
#header p {
   color:#2a5091;
   font-size:1.3em;
   font-style:italic;
   font-weight:bold;
   line-height:20px;
   text-align:right;
}


      </style> 
 </head> 
 <body> 
  <div id="header"> 
   <span> <h1>Name of Website Here</h1> </span> 
   <span> <h3> Call Today! <br> <span>(xxx) xxx-xxxx</span> </h3> </span> 
   <div> 
    <span> <p> 123 Main St. <br> Example City, Demo State, Zip </p> </span> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials