Center a link in CSS with the top header - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Header

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

Description

Center a link in CSS with the top header

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>

#header{<!--from   ww w.  ja va  2  s . c om-->
   background-color: tan;
   width: 90%;
   height: 80px;
   margin: auto;
   margin-bottom: 30px;
   text-align: center;
}
#header a {
   border: 3px solid green;
   margin-left: 40px;
   margin-right: 40px;
}
#links {
   vertical-align: middle;
   display: inline-block;
   position: relative;
   top: 36%;
}
#box{
   border: 3px solid red;
}
#space{
   text-align: center;
}
#leftcolumn {
   width: 300px; border: 1px solid red; float: left; margin-left: 30px;
}
#mcolumn {
   width: 300px; border: 1px solid red; margin: auto;
}
#rightcolumn {
   width: 300px; border: 1px solid red; float: right; margin-right: 30px;
}
.clear {
   clear: both;
}
#box2{
   border: 3px solid green;
   margin: 40px;
   text-align: center;
}
#bx{
   border: 3px solid green;
   margin: auto;
   width: 200px;
}
#box2{
   border: 3px solid green;
   margin: 40px;
   text-align: center;
}
#margin{
   margin: 30px;
}


      </style> 
 </head> 
 <body translate="no"> 
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  <title>JSP Page</title> 
  <div id="header"> 
   <div id="links"> 
    <a href=""> Facebook </a> 
    <a href=""> Google </a> 
    <a href=""> Yahoo </a> 
   </div> 
  </div> 
  <div id="box"> 
   <div id="space"> 
    <div id="leftcolumn"> 
     <p>LEFT</p> 
    </div> 
    <div id="rightcolumn"> 
     <p>RIGHT</p> 
    </div> 
    <div id="margin"> 
     <div id="mcolumn"> 
      <p>mcolomn</p> 
     </div> 
    </div> 
    <div class="clear"></div> 
   </div> 
  </div> 
  <div id="box2"> 
   <div id="margin"> 
    <div id="bx"> 
     <p> hello what is up </p> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials