title: aligning list-style-image proportionally with text
body: <p>So I have</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li&gt;Hello&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>and</p>
  
  <pre><code>li {
      list-style-image: url(../img/bullet.png); /* 13x13 px */
      /* line-height: 13px; */
      /* vertical-align: middle; */
      padding-left: 5px;
  }
  </code></pre>
  
  <p>which looks like</p>
  
  <p><img src="https://i.stack.imgur.com/pMtq1.png" alt="enter image description here"></p>
  
  <p>as you can see text and image element of <code>&lt;li&gt;</code> are not aligned vertically (image is higher than text), I tried applying line-height and vertical-align to it (commented out code), but it didn't even it out. Is there a way to achieve good alignment?</p>