title: How to vertical align an anchor inside li?
body: <p>I want to create a menu with a 'button' (anchor) in the last <code>&lt;li&gt;</code>.</p>
  
  <p>So far so good, but when I want to create the button, I can't get it to vertical center it.</p>
  
  <p>Here is <a href="https://jsfiddle.net/wksfdszu/" rel="nofollow">a live demo</a>.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>nav
  {
    width: 100%;
    height: 60px;
    
    background-color:blue;
  }
  
  ul
  {
    list-style-type:none;
  }
  
  li
  {
      height: 60px;
     color: #000000;
    font-family: $font-family-semi-bold;
    float:left;
      background-color:green;
      line-height:60px;
      margin-left: 20px;
      margin-right: 20px;
  }
  
  .vertical
  {
    display: inline-block;
    height: 40px;
    background-color:red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav&gt;
    &lt;ul&gt;
      &lt;li&gt;Hello World1&lt;/li&gt;
      &lt;li&gt;Hello World2&lt;/li&gt;
      &lt;li&gt;Hello World3&lt;/li&gt;
      &lt;li&gt;
        &lt;a href="#" class="vertical"&gt;
          Vertical align this!
        &lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>