title: how vertically center link in div
body: <p>The search now link is stuck aligned to the top of the div.  How do I make this link centered vertically in the div?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.advanced-button {
    width: 200px;
    height: 55px;
    background-color: #f4c23d;
    line-height: 40px;
  }
  .advanced-button a {
    margin-left: 15px;
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
    color: #222222;
    font-weight: 700;
    text-transform: uppercase;
    vertical-align: middle;
  }
  .advanced-button i {
    float: right;
    width: 40px;
    height: 55px;
    line-height: 40px;
    text-align: center;
    background-color: #f0b20e;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="advanced-button"&gt;
    &lt;a href="#"&gt;Search Now&lt;i class="fa fa-search"&gt;&lt;/i&gt;&lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>