Ordered list - html : How to make point(ol{style-list:disc;}) position in midde height of image?

Ordered list - html : How to make point(ol{style-list:disc;}) position in midde height of image?

Example where point located in bottom of image and not in middle:

The code of example

<ol style="style-list:disc;">
<li><img src="https://t2.gstatic.com/images?q=tbn:MezWc3ku_XBiwM:http://www.whereisacar.com/images/cars/bill-gates-car.jpg"></li>
<li><img src="https://t0.gstatic.com/images?q=tbn:98OwBE0-icyCNM:http://www.comparecheapinsurance.com/car-insurance/images/car-insuran开发者_高级运维ce-policy.jpg"></li>
</ol>

My parpose to move image or point position that will looks that point in middle of image height.

Edit: I am looking for the way without use background point image, if this option exist

First of all, make it ul instead of ol, like this:

<ul class="images">
 <li><img...
 <li><img...
</ul>

Then add this CSS:

ul.images img {
    vertical-align: middle;
}

Turn off the bullet in the CSS and instead use an image as a CSS property on the <li>:

ol {
    list-style: none;
}

li {
    background: url(bullet.gif) no-repeat 0 50%;
}

Also, since you're just displaying bullets, it would make more sense to use an unordered list <ul>.