title: Vertical Align Not Taking Effect
body: <p>I am not sure why my "Add to Favorites" text won't align to the middle of the blue element, which is what I would like it to do. I've added <code>vertical-align:middle</code> to both classes below. If I remove the fav.png picture inside the blue field the text just goes to the top of the red dotted box.</p>
  
  <p><img src="https://i.stack.imgur.com/hkspO.png" alt="Fav Box"></p>
  
  <p>CSS:</p>
  
  <pre><code>.favouriteLink
  {
      border: 1px solid black;
      margin:3%;
      background-image: url('images/blueBanner.png');
      border-radius: 15px;
      height:40px;
      vertical-align:middle;
      text-align:center;
  
  }
  
  .favouriteLink a
  {
      border: 1px dotted red;
      display:block;
      text-decoration:none;
      text-weight:bold;
      color:white;
      vertical-align:middle;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="favouriteLink"&gt;
      &lt;a href="javascript:alert('test')"&gt;&lt;img class="navImg" src="images/fav.png" /&gt;Add to Favourites&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h2>EDIT:</h2>
  
  <p>Working fiddle: <a href="http://jsfiddle.net/YcMgh/2/" rel="nofollow noreferrer">http://jsfiddle.net/YcMgh/2/</a></p>
  
  <p>For some reason setting the height as suggested to 40px would centre the text but only if the image was smaller which is why I didn't notice it originally. I'm a bit confused on this because how would changing the image position change the text? Is the text field not separate from the image?</p>
  
  <p>For example...
  Since my img is 32px by 32px this occurs- <a href="http://jsfiddle.net/YcMgh/3/" rel="nofollow noreferrer">http://jsfiddle.net/YcMgh/3/</a></p>
  
  <p>However if I change to 25px: <a href="http://jsfiddle.net/YcMgh/4/" rel="nofollow noreferrer">http://jsfiddle.net/YcMgh/4/</a></p>