文本行中的图像略有偏移答案

【问题标题】：Image in text line is slightly offset文本行中的图像略有偏移
【发布时间】：2013-10-30 14:26:22
【问题描述】：

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

【问题讨论】：

你能不能只添加 margin-top:3px 到 headerlinks 一个 img {}？
尝试给“.headerlinks a”一个行高，最好与a标签中的字体大小相同..

标签： php html css image position

【解决方案1】：

您是否使用 CSS 重置？你可以试试下面这个。

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：