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

Question

I have a list setup in html as 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 with the following 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 I have considered "vertical-align:middle;" foe all "ul" and "li"s the result looks awkward as below:

Answer 1

将line-height属性添加到您的CSS代码中，以#remove和#move以及图像的高度。

Answer 2

Make your text bigger so it has the same height as your image.
OR
Give it a background image and position it with padding.

li{    
background: url(../images/remove.fw.png)
  padding: 5px 0px 5px 10px;
  margin: 0;
  list-style: none;
}

edit: line-height will push your text down, not up.

Answer 3

You're aligning middle but you've also got your padding pushing it further to the right. Remove your padding and see if that helps.