title: How to align inline img href with text tag it's in?
body: <p>Ok, so I have an <code>&lt;a&gt;</code> tag inside a <code>&lt;h4&gt;</code> tag, so any text displayed in the <code>&lt;a&gt;</code> tag picks up the style from the h4, and is inline with it.</p>
  
  <p>My code:</p>
  
  <pre><code>&lt;h4&gt;
      &lt;a href=""&gt;&lt;img src="http://i.imgur.com/hiXucbv.png"&gt;&lt;/a&gt;
      hit
      &lt;a href=""&gt;&lt;img src="http://i.imgur.com/hiXucbv.png"&gt;user&lt;/a&gt;
      and did something.
  &lt;/h4&gt;
  </code></pre>
  
  <p>Live demo: <a href="http://jsfiddle.net/3vyhb4fh/1/" rel="nofollow">http://jsfiddle.net/3vyhb4fh/1/</a></p>
  
  <p>My question is; how can I get all of these elements to be vertically aligned? Currently the images are way off, but changing things like line-height only seems to mess up the formatting on the page.</p>
  
  <p>I haven't really displayed <code>&lt;a&gt;</code> tags in this way before, so please tell me if this approach is incorrect.</p>