文本行中的圖像略微偏移

我試圖通過處理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; 
}

來源

2013-10-21 ividyon

你不能只是將margin-top：3px添加到headerlinks一個img {}？ – Gavin

嘗試給「.headerlinks a」一個行高，最好與a標籤中的字體大小相同。 – Sebsemillia

如果添加margin-top:2px;的圖標類這應該工作。這個數字可能需要移位一兩位數字。

這將工作，如果你保持靜態font-size。

來源

2013-10-21 22:29:10

您是否正在使用CSS重置？你可以嘗試下面的一個。

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

此外，最好使用background-image的圖標，並設置它的位置。

來源

2013-10-21 22:41:56 nut

文本行中的圖像略微偏移

回答

相關問題