title: How can I move text up when inside a span inside of a <li>
body: <p>I have the following:</p>
  
  <pre><code>&lt;li&gt;
  &lt;a class="dw"&gt;&lt;span&gt;Design Goals&lt;/span&gt;&lt;/a&gt;
  &lt;/li&gt;
  
  .dw {
     background-image: url(/Content/images/icons/fugue/document-globe.png);
  }
  </code></pre>
  
  <p>When viewed in my browser I see something like this</p>
  
  <pre><code>iii
  iii  xxxxxxxxxxxxxxx
  iii  xxxxxxxxxxxxxxx
  </code></pre>
  
  <p>Where i represent the image and x the text "Design goals". </p>
  
  <p>Is there some way that I could push down the background image or push up
  the text so that I could get them to line up more. I tried adding padding
  and a margin to the span but that does not seem to work. I also tried 
  different combination of line-height but that also does not work.</p>
  
  <p>I tried: background-position: center but then it looks like this:</p>
  
  <pre><code>             iii
         xxxxxxiiixxxxxx
         xxxxxxxxxxxxxxx
  </code></pre>