文本行中的图像略有偏移

时间:2013-10-21 22:07:00

标签: php html css image position

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

The white icons on the buttons are slightly higher than the text.

正如您所看到的,按钮上的白色图标(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;
}

2 个答案:

答案 0 :(得分:2)

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

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

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

答案 1 :(得分:1)

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

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