Menu with links floated at left and right but aligned at center in terms of height - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Menu

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

Description

Menu with links floated at left and right but aligned at center in terms of height

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">
.container {<!--from ww w  . jav a  2s  . co  m-->
   width:100%;
   background:yellow;
   float:left;
}

.content {
   height:51px;
}

.menu-list {
   list-style:none;
}

.menu-list li {
   float:left;
}

.menu-links {
   float:right;
}

.menu-list li a {
   color:Chartreuse;
   text-decoration:none;
   line-height:51px;
   font-weight:bold;
}

.menu-list .spacer, .menu-links .spacer {
   height:51px;
   width:2px;
}

.menu-list li, .menu-links a {
   display:inline-block;
   vertical-align:middle;
}

.menu-list li a:hover {
   background:red;
}
</style> 
 </head> 
 <body> 
  <div class="container"> 
   <div class="content"> 
    <ul class="menu-list"> 
     <li class="spacer"></li> 
     <li> <a title="" href="">Lore</a> </li> 
     <li> <a title="" href="">Lore</a> </li> 
     <li> <a title="" href="">Lore</a> </li> 
     <li> <a title="" href="">Lore</a> </li> 
     <li> <a title="" href="">Lore</a> </li> 
     <li> <a title="" href="">Lore</a> </li> 
     <li> <a title="" href="">Lore</a> </li> 
    </ul> 
    <div class="menu-links"> 
     <a href="" class="spacer"></a> 
     <a href="">Lorem </a> 
     <a href="">Lorem </a> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials