title: Middle vertical align for <a> in <li> menu
body: <p>I need to vertically align in middle labels of menu. Allso if client will change the value of label and it will break in two lines, it'll stays in middle. As i know vertical-align: middle works for table cells, but I need to generate menu from <code>&lt;li&gt;</code> elements. See example code below.</p>
  
  <p>html</p>
  
  <pre><code>  &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;qwe&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;asd&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;zxcvbnm asdfgh&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>ul {
    list-style: none;
  }
  li {
    float:left;
    border: 1px solid;
    margin: 1px;
    height: 60px;
    width: 60px;
    background: tomato;
    text-align: center;
    vertical-align: middle;  
  }
  a {
    vertical-align: middle;
  }
  </code></pre>
  
  <p>And working prototype at <a href="http://jsbin.com/awihoy/1/edit" rel="nofollow">jsbin</a></p>