vertical-align不会将列表样式图像与文本对齐

Question

我在html中设置了一个列表，如下所示：

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

使用以下css代码进行设计：

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

虽然我已经考虑过＆＃34; vertical-align：middle;＆＃34;所有的敌人＆＃34; ul＆＃34;和＆＃34; li＆＃34; s结果看起来很尴尬如下：

Answer 1

将line-height属性添加到#remove和#move的css代码中，使用图像的高度。

Answer 2

使文字更大，使其与图像具有相同的高度。
OR
给它一个背景图像并用填充物定位。

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

编辑：行高会将文字向下推，而不是向上。

Answer 3

你正在调整中间位置，但是你也已经将你的填充推向了右边。删除你的填充，看看是否有帮助。