Vertical align button beside image
<p>I am trying to get my link to vertical align center in the middle and my logo to vertical align in the middle but off to the right as the image below shows. I can get the image to work perfectly. but i cannot get the link vertical aligned middle.</p>

<p>this will also be full width across.</p>

<p><a href="https://i.stack.imgur.com/lKQsT.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lKQsT.jpg" alt="view layout image"></a></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>.footer-logo {
  display: block;
  position: absolute;
  right: 50px; 
  margin-top: 30px;
}

.footer-main {
  height: 200px;
  background-image: url(../images/backgrounds/bg-image.jpg);
  background-color: grey; 
  position: relative;
  text-align: center;
  vertical-align: middle;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="footer-main"&gt;
  &lt;a class="button" href="#"&gt;My test link here&lt;/a&gt;
  &lt;img src="http://placehold.it/100" alt="" class="footer-logo"&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>