Image in text line is slightly offset

I’m trying to make a clickable button by treating a hyperlink with CSS and adding a little icon next to it. Everything but one detail works great; namely the icons which are slightly offset from the text on the button. It looks as follows:

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

As you may see, the white icons (12x12px) on the buttons are slightly higher than the text, touching the CSS borders of the hyperlink, while the rest of the text does not.

I have tried every solution that came to mind, including applying vertical-align to the image elements (which put the icon too close to the LOWER border instead, reversing the situation), but sadly could not get it to just line up with the text in the middle of the element nicely. What should I do?

Code in question:

HTML example of a button:

<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 of the buttons:

.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

This should work if you add margin-top:2px; to the icon class. This number may need to be shifted by a digit or two.

This will work if you maintain the static font-size.

Advertisement

Answer