css - アンカー背景画像 - アンカー テキスト オーバーレイ画像

Question

アンカーに背景画像を表示する次の CSS があります。問題は、リンク テキストが画像の上に表示されることです。何か案は？

a.interactive {
background:url(../images/icons/icon_interactive.png) left center no-repeat;
padding-right:50px;
display:inline-block;    
}

Answer 1

テキストを右にシフトするパディング左を追加しました...

a.interactive {
background:url(../images/icons/icon_interactive.png) left center no-repeat;
padding-left:30px;
height:25px;
width:25px;
display:inline-block;    
text-decoration: none;
vertical-align:text-center;
}

Answer 2

必要な左パディングを追加するだけですか？画像が 30px の場合、次のようpadding-left:32px'にすると、テキストが画像の右側に押し出されます。