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

Question

Hi,

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="http://t2.gstatic.com/images?q=tbn:MezWc3ku_XBiwM:http://www.whereisacar.com/images/cars/bill-gates-car.jpg"&gt;&lt;/li&gt;
<li><img src="http://t0.gstatic.com/images?q=tbn:98OwBE0-icyCNM:http://www.comparecheapinsurance.com/car-insurance/images/car-insurance-policy.jpg"&gt;&lt;/li&gt;
</ol>

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

Edit:

---

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

Thanks

Answer 1

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>.

Answer 2

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;
}