php - テキスト行の画像がわずかにずれている

Question

ハイパーリンクを CSS で処理し、その横に小さなアイコンを追加して、クリック可能なボタンを作成しようとしています。1 つの詳細を除いてすべてがうまく機能します。つまり、ボタンのテキストからわずかにオフセットされたアイコンです。次のようになります。

ご覧のとおり、ボタンの白いアイコン (12x12px) はテキストよりわずかに高く、ハイパーリンクの CSS 境界に接触していますが、残りのテキストは接触していません。

画像要素に垂直方向の配置を適用するなど、頭に浮かんだすべての解決策を試しましたが（代わりにアイコンを下の境界線に近づけすぎて、状況を逆転させました）、残念ながらテキストと整列させることはできませんでした要素の真ん中にうまく。私は何をすべきか？

問題のコード:

ボタンの 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;
}