Vertical text align works in menu bar but images in menu bar - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Menu Bar

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

Description

Vertical text align works in menu bar but images in menu bar

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">
#menu, #menu ul {
   margin:0 auto;
   padding:0;
   background-color:Chartreuse;
}

#menu {<!--   www . ja va 2 s . c  o m-->
   display:table;
   width:100%;
   list-style:none;
   position:relative;
   top:0px;
   text-align:center;
   -webkit-box-shadow:0px 4px 24px 0px yellow;
   -moz-box-shadow:0px 4px 24px 0px blue;
   box-shadow:0px 4px 24px 0px pink;
   font-size:19px;
   height:41px;
   z-index:102;
}

#menu.fixed {
   position:fixed;
   top:0;
   width:100%;
}

#menu li {
   display:table-cell;
   list-style:none;
   padding-right:51px;
   left:51px;
   vertical-align:middle;
}

#menu>li:hover>ul {
   background:OrangeRed;
   display:block;
   left:0;
   width:100%;
   -webkit-box-shadow:0px 4px 24px 0px grey;
   -moz-box-shadow:0px 4px 24px 0px BlueViolet;
   box-shadow:0px 4px 24px 0px Chartreuse;
}

#menu>li>ul {
   display:none;
   position:absolute;
   text-align:center;
}

#menu li a {
   display:block;
   padding:11px 11px;
   text-decoration:none;
   font-weight:lighter;
   white-space:nowrap;
   color:yellow;
}

#menu li a:hover {
   color:blue;
   font-size:19px;
   vertical-align:middle;
}

#menu li ul li {
   display:inline-block;
   float:none;
}
</style> 
 </head> 
 <body> 
  <ul id="menu" name="menu"> 
   <li> <img src="https://www.java2s.com/style/demo/Opera.png" width="100" height="31"> </li> 
   <li> 
    <div> 
     <a href="#">Lorem ip</a> 
    </div> </li> 
   <li> <a href="#">Lorem ip</a> 
    <ul> 
     <li> <a href="#">Lorem ipsum do</a> </li> 
     <li> <a href="#">Lorem ipsum do</a> </li> 
     <li> <a href="#">Lorem ipsum d</a> </li> 
     <li> <a href="#">Lorem ipsum</a> </li> 
     <li> <a href="#">Lorem ip</a> </li> 
     <li> <a href="#">Lorem ipsum </a> </li> 
    </ul> </li> 
   <li> <a href="about.html">Lorem ips</a> 
    <ul> 
     <li> <a href="#">Lorem ipsum d</a> </li> 
     <li> <a href="#">Lorem ipsum </a> </li> 
     <li> <a href="#">Lorem ipsum d</a> </li> 
     <li> <a href="#">Lorem i</a> </li> 
    </ul> </li> 
   <li> <a href="#">Lorem i</a> </li> 
   <li> <a href="#"> <img src="https://www.java2s.com/style/demo/Firefox.png" width="100" height="25"> </a> </li> 
   <li> <a href="#"> <img src="https://www.java2s.com/style/demo/InternetExplorer.png" width="100" height="28"> </a> </li> 
   <li> <a href="#">Lore</a> </li> 
  </ul>  
 </body>
</html>

Related Tutorials