title: Vertical Align - List with "list-style-image"
body: <p>Neither googling nor browsing in SO helped me - hope someone here can solve this :</p>
  
  <p>I have the following html :</p>
  
  <pre><code>&lt;ul&gt;
  &lt;li&gt;ABC 1&lt;/li&gt;
  &lt;li&gt;ABC 2&lt;/li&gt;
  &lt;li&gt;ABC 3&lt;/li&gt;
  &lt;li&gt;ABC 4&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>and css</p>
  
  <pre><code>ul {list-style-image:url(../img/hook.png);}
  li {vertical-align:middle;color:#FFFFFF;font-size:16px;text-shadow: 0em 0.13em 0.13em #2A2A2A;font-family:Helvetica,Arial,Sans-Serif;font-weight:normal;}
  </code></pre>
  
  <p>the "hook.png" image is 32x35 px - but whenever I create list items, text (e.g. ABC...) will always be shown below the image. Tried line-height and those 100% thingies - but neither worked out.</p>
  
  <p>Any quick help :/ ?</p>