list style image not aligned vertically - html

Question

I used image list style and trying to align it perfectly well with the text in vertical.
JSFiddle: http://jsfiddle.net/uwzW5/
But it seems the text is always down by 2px-3px. How can I fix this issue?
<div class="col-md-3 feature-ul-section">
<ul>
<h3>TRACK</h3>
<li> Detailed event tracking:
<ul class="sub-feature features-close">
<li> Timestamp</li>
<li> IP</li>
<li> Country</li>
</ul>
</li>
<li> Conversions Tracking
<ul class="sub-feature features-close">
<li> <a >Double tier conversion</a></li>
<li> <a>Configurable cookies</a></li>
<li> Track multiple conversions</li>
<li> Track product ID</li>
<li> Track custom parameters</li>
<li> Track conversion value</li>
<li> Track commission amount</li>
<li> http/https</li>
</ul>
</li>
<li> <a>Google Analytics UMT</a></li>
</ul>
</div>
and css
.feature-ul-section ul li {
list-style-image: url(../img/green-list.png);
font-family:'Source sans pro';
}
.feature-ul-section ul li ul li {
list-style-image: url(../img/grey-list.png);
}

Answer 1

You can add a span element inside each li element and then add CSS style to the span element
Try
HTML:
<div class="col-md-3 feature-ul-section">
<ul>
<h3>TRACK</h3>
<li> <span>Detailed event tracking:</span>
<ul class="sub-feature features-close">
<li> <span>Timestamp</span></li>
<li> <span>IP</span></li>
<li> <span>Country</span></li>
</ul>
</li>
</div>
CSS:
span{
position:relative;
top:-3px;
}
DEMO