文本行中的图像略有偏移

Question

我正在尝试通过使用CSS处理超链接并在其旁边添加一个小图标来创建一个可单击按钮。除了一个细节之外的一切都很有效;即略微偏离按钮上文字的图标。它看起来如下：

正如您所看到的，按钮上的白色图标（12x12px）略高于文本，触摸超链接的CSS边框，而文本的其余部分则没有。

我已经尝试了所有想到的解决方案，包括对图像元素应用垂直对齐（这使得图标太靠近LOWER边框，反转情况），但遗憾的是无法将它排成一行很好地与元素中间的文本。我该怎么办？

有问题的代码：

按钮的HTML示例：

<td class="headerlinks">
                    <a href="{U_LOGIN_LOGOUT}"><img src="{T_THEME_PATH}/images/icon_mini_login.png" alt="*" /> {L_LOGIN_LOGOUT}</a>&nbsp;
</td>

按钮的CSS：

    .headerlinks {
    margin: 0px 0px;
    font-size: 1.1em;
        line-height: 200%;
}

.headerlinks a img { 
}

.headerlinks a {
        white-space: nowrap;
        border: 1px solid #FAE000;
        padding: 1px 4px 2px 4px;
        border-radius: 4px;
        margin: 0px;
    background-color: #000;
        vertical-align: middle;
}

Answer 1

您使用的是CSS重置吗？您可以尝试以下方法。

http://meyerweb.com/eric/tools/css/reset/

最好使用background-image作为图标，并在其上设置一个位置。

Answer 2

如果您将margin-top:2px;添加到图标类，这应该有用。这个数字可能需要移动一两位数。

如果你保持静态font-size，这将有效。