title: Vertically Centering an img within an a tag within a div
body: <p>I'm trying to vertically center an image in a div in an <code>&lt;a&gt;</code> tag but I can't get the CSS to vertically center the image for the life of me.</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>div {
    height: 7rem;
    width: 90%;
    text-align: center;
    margin: 1.25rem auto;
    padding: 0 5.5rem 0 5.5rem;
    font-size: .8rem;
    border-style: solid;
    border-width: .08rem;
  }
  div * {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
  }
  div img {
    width: 4rem;
  }
  div div {
    margin: 0 auto;
    width: 4rem;
    height: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="footer"&gt;
    &lt;div id="footerhome"&gt;
      &lt;a href="https://www.google.com"&gt;
        &lt;img src="http://images.clipartpanda.com/smiley-face-transparent-background-tumblr_mdv6nltwdB1qdic05o1_500.gif" /&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is what I'm currently working with:
  <a href="http://codepen.io/SamanthaBae/pen/LRomdr" rel="nofollow noreferrer">http://codepen.io/SamanthaBae/pen/LRomdr</a></p>
  
  <p>I've tried the solution of making the image the background image of the div it's contained in and inserting the <code>&lt;a&gt;</code> tag in between, but it doesn't seem to work as a link, even though I can get it to vertically align: </p>
  
  <p>I have checked <a href="https://stackoverflow.com/questions/9583289/vertical-align-middle-an-image-in-an-a-tag-in-a-div">here</a> and <a href="https://css-tricks.com/forums/topic/vertical-align-image-in-link/" rel="nofollow noreferrer">here</a> as resources, but have not been able to apply their methods in this case. </p>