Vertical align of A elements inside LI

I have a problem with implementing a new design. While the anchor elements are aligned correctly in the old design, for some reason the anchor elements are aligned to the bottom in the new design with html/css regading the UL, LI and A part being exatly the same.

#treeview ul {
    padding-top: 3px;
}
#treeview ul li {
    background: none repeat scroll 0 0 transparent;
    line-height: 24px;
    padding-bottom: 3px;
    padding-left: 0;
}
#treeview ul li.active {
    background: none repeat scroll 0 0 #DDDDDD;
}
#treeview ul li ul li {
    padding-left: 30px;
}
#treeview ul li a {
    color: #444444;
    padding-left: 5px;
    text-decoration: none;
}


<div id="treeview">
    <ul>
        <li>
            <img src="assets/js/no-expand.png">
            <img class="icon" width="24" height="" src="as开发者_运维问答sets/images/icons/icon_dance24x24.png">
            <a title="Essential" href="/index/night-clubs/essential/">Essential</a>
        </li>
    </ul>
</div>

---

Try this...

#treeview ul li * {
    vertical-align: middle;
}

---

Try:

ul li {
    display: table-cell;
    vertical-align: top;
}