title: How to center the list icon for an image inside a li element
body: <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>li{
    height: 20px;
    line-height: 20px;
    vertical-align: middle;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul style="list-style-type: circle"&gt;
          &lt;li&gt;&lt;img src="http://latex.codecogs.com/gif.latex?A=B&amp;plus;\left&amp;space;(&amp;space;C&amp;plus;D&amp;space;\right&amp;space;)^2" height="20" width="150"&gt;&lt;/li&gt;
      &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As not all of the browser support MathML I use images for equations. As I adjust the height of the images I don't have a problem when I use the images in text. However I have a problem using images as a list element, the bullet icon is shown aligned with the bottom of the image.</p>
  
  <p>I tried to specify the height of the <code>li</code> element the same as the <code>height</code> of the image and assign the same value to <code>line-height</code> property. After that even I use <code>vertical-align: middle</code> property it doesn't work.</p>
  
  <p>What can be done to vertically center the bullet icon?</p>