1

我正在尝试通过使用 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;
}
4

2 回答 2

2

您是否使用 CSS 重置？您可以尝试以下一种。

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

此外，最好使用 abackground-image作为图标，并在其上设置位置。

于 2013-10-21T22:41:56.243 回答
1

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

如果您保持静态，这将起作用font-size。

于 2013-10-21T22:29:10.520 回答