title: css - verticaly align horizontal li
body: <p>I'm trying to vertically centralize an a: element within an li in a wordpress navigational menu, however I wasn't successful in achieving this.</p>
  
  <p>The code I'm using is:
  <strong>CSS</strong></p>
  
  <pre><code>.site-menu ul:before, .site-menu ul:after { content: ""; display: table; }
  .site-menu ul:after { clear: both; }
  .site-menu ul { *zoom: 1; }
  
  .site-menu .menu ul li{
      list-style: none;
      float:left;
      border-right: 1px solid #7B7B7B;
      height:100%;
  }
  
  .site-menu ul{
      height:10%;
      border: 1px solid #000;
  }
  
  .site-menu .menu ul li a{
      margin-right:5px;
      margin-left:5px;
  }
  
  .site-menu .menu ul li:last-of-type{
      border-right:none;
  }
  
  .site-menu a:link,
  .site-menu a:visited{
      text-decoration: none;
      font-family: Verdana, Geneva, sans-serif;
      font-size: 110%;
      color: #C5C5C5;
      vertical-align: bottom;
  
  }
  
  .site-menu li:hover{
      color: #00FF99;
      background: #5A5A5A;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;nav class="site-menu"&gt; 
                      &lt;?php wp_nav_menu('title_li=');?&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>Might be something really simple however i'm unable to get to the bottom of if.</p>
  
  <p>Thanks in advance,
  J</p>