Align inline-block image and nav buttons - HTML CSS CSS Form

HTML CSS examples for CSS Form:input image button

  1. HOME
  2. HTML CSS
  3. CSS Form
  4. input image button

Description

Align inline-block image and nav buttons

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <title>Nav Bar with Logo</title> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

.nav {<!--   ww  w  .j a  v  a2 s .c  o m-->
   height: 120px;
   line-height: 120px;
   margin: 0 auto;
   vertical-align: middle;
   width: 70%;
}
.nav li {
   display: inline-block;
   list-style-type: none; /* removes bullets */
}
.nav .logo,
.nav .navlogo,
.nav .navbutton {
   display: inline-block;
}
.nav .logo {
   vertical-align: middle;
}
.nav .navbutton {
   font-weight: bold;
   height: 36px;
   line-height: 36px;
   padding: 5px 0 0 30px;
   text-align: center;
}


      </style> 
 </head> 
 <body>
   HTML: 
  <div class="nav"> 
   <div class="navlogo"> 
    <a href="http://protein.guru" class="navlogo-link"> <img src="https://www.java2s.com/style/demo/InternetExplorer.png" alt="Protein.guru Logo" class="logo"> </a> 
   </div> 
   <div class="navbutton"> 
    <span id="recipes">Recipes</span> 
   </div> 
   <div class="navbutton"> 
    <span id="fitness">Fitness</span> 
   </div> 
   <div class="navbutton"> 
    <span id="wcontrol">Weight Control</span> 
   </div> 
   <div class="navbutton"> 
    <span id="supplementation">Supplementation</span> 
   </div> 
  </div> Optimized HTML: 
  <ul class="nav"> 
   <li class="navlogo"> <a href="http://protein.guru" class="navlogo-link"> <img src="https://www.java2s.com/style/demo/Opera.png" alt="Protein.guru Logo" class="logo"> </a> </li> 
   <li class="navbutton" id="recipes">Recipes</li> 
   <li class="navbutton" id="fitness">Fitness</li> 
   <li class="navbutton" id="wcontrol">Weight Control</li> 
   <li class="navbutton" id="supplementation">Supplementation</li> 
  </ul>  
 </body>
</html>

Related Tutorials