背景圖像作爲錨圖標 - 定位左文本

Question

的我使用下面的代碼來設置錨的圖標：

.iconed{ 
    padding-left:22px; 
    background-position: 3px center; 
    background-repeat: no-repeat; 
} 

.iconed.selected{ 
    background-image:url(images/selected.png); 
} 

<a href="#" class="iconed selected">Some link</a> 

這時候，錨具有自動寬度或/和文本對齊設置爲左的偉大工程。 當錨點寬度設置爲100％並且文本對齊爲中心時，有什麼方法可以使此圖標從文本顯示爲-5px？我想不使用：僞類前，但如果沒有其他辦法...

需要對IE9 +

包裝與其他元素的工作是不是一個解決方案

Answer 1

我認爲僞元素可能是您唯一的選擇。 http://jsfiddle.net/2rRDE/

第一個將文本向右推，因爲它是普通文檔流的一部分。

第二個看起來像它不，但我只是應用相對定位和負邊距拉文本回到確切的中心。

a { 
     display:block; 
     width:200px; 
     border:1px solid orange; 
     text-align:center; 
    } 

    .a1:before { 
     content:"☺"; 
    } 

    .a2:before { 
     content:"☺"; 
     position:relative; 
     left:-15px; 
     margin-right:-15px; 
     width:15px; 
     display:inline-block; 
    } 

編輯：迴應置評

你原來的職位從來不提要求垂直對齊。但是，這是一個最低限度的修改版本，並使用了實際的圖像。 http://jsfiddle.net/2rRDE/1/

a { 
    display:block; 
    width:100%; 
    border:1px solid orange; 
    text-align:center; 
    line-height:50px; 
} 


a:before { 
    content:url("http://benjinyap.com/system/asset.png"); 
    display:inline-block; 
    margin-right:5px; 
} 

您不能將pseudo設置爲塊元素。圖標應該跟隨文本的垂直位置。但是如果你希望它不管錨的線高度/高度/填充是否居中，那麼在這一刻我就沒有答案。