title: CSS Getting text to align properly in list with custom bullet
body: <p>I am trying to get the text in my list to align properly, but I can't get it right.</p>
  
  <p><img src="https://i.stack.imgur.com/L3xNS.jpg" alt="enter image description here"></p>
  
  <p>As you can see the text is slightly off and starts at the "image bullet" baseline. I want it to be in the middle.</p>
  
  <p>Source:</p>
  
  <pre><code>//CSS
  ul  {
      list-style-image:url(image/li.png);
      list-style-position:outside;
      margin:0; padding:0;
  }
  ul li {
      margin:0; padding:0;
  }
  
  //HTML
  &lt;ul&gt;
     &lt;li&gt;Item 1&lt;/li&gt;
     &lt;li&gt;Item 2&lt;/li&gt;
     &lt;li&gt;Item 3&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>