title: Vertically center a link within a div
body: <p>I have an unordered list...</p>
  
  <pre><code>&lt;ul class="hide"&gt;
    &lt;li class="home"&gt;
      &lt;div class="link"&gt;
        &lt;a href="/"&gt;Home&lt;/a&gt;
      &lt;/div&gt;
    &lt;/li&gt;
    &lt;li class="about"&gt;
      &lt;div class="link"&gt;
        &lt;a href="/about"&gt;About Our Community&lt;/a&gt;
      &lt;/div&gt;
    &lt;/li&gt;
    &lt;li class="contact"&gt;
      &lt;div class="link"&gt;
        &lt;a href="/contact"&gt;Contact Us&lt;/a&gt;
      &lt;/div&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>My CSS looks like this....</p>
  
  <pre><code>#sitenav ul li .link a {
    color: #555;
    text-decoration: none;
    float: left;
    padding-right: 3px;
    margin-top: auto;
    margin-bottom: auto;
  }
  </code></pre>
  
  <p>But the margins do not center the link vertically</p>
  
  <p>Any ideas?</p>