html - vertical-align does not align the list-style-image with the text -

html - vertical-align does not align the list-style-image with the text -

i have list setup in html follows:

<ul id="remove"> <li id="rm_txt_1" onclick="remove_1();">remove </li> </ul> <ul id="move"> <li id="mv_txt_1" onclick="position();">move down</li> </ul>

styled next css codes:

#remove{ list-style-image:url(../images/remove.fw.png); padding-left:30px; margin-top:15px; vertical-align:middle;} #move{ list-style-image:url(../images/mvdown.fw.png); padding-left:30px; margin-top:15px; vertical-align:middle;} #rm_txt_1, #mv_txt_1{ padding-left:5px; cursor:pointer; font-size:14px; vertical-align:middle;}

though have considered "vertical-align:middle;" foe "ul" , "li"s result looks awkward below:

add line-height property css code #remove , #move, height of images.

html css