title: CSS: vertical align the text in li item , doesn't work
body: <p>I use a list-style-image for li items , and a single-line text.</p>
  
  <p><img src="https://i.stack.imgur.com/v3fEW.png" alt="enter image description here"></p>
  
  <p>But it looks bad, so I want to vertically align the text to the middle of the image.</p>
  
  <p>I should use vertical-align: middle , right ? But it didn't work for me.</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt; This is an demo &lt;/title&gt;
          &lt;style&gt;
              body {
                  background-color: #464443;
                  color: white;
              }
              ul {
                  list-style-image: url('bg.png');
              }
  
              li {
                  vertical-align: middle;
              }
  
          &lt;/style&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;ul&gt;
              &lt;li&gt;abc&lt;/li&gt;
              &lt;li&gt;abc&lt;/li&gt;
              &lt;li&gt;abc&lt;/li&gt;
              &lt;li&gt;abc&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>