背景图像作为锚图标 - 位于文本左侧

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>

当锚具有自动宽度或/和 text-align 设置为左​​时，效果很好。 当锚宽度设置为 100% 并且文本对齐为中心时，有什么方法可以使此图标从文本中显示 -5px？我不想用 :before 伪类，但是如果没有别的办法...

需要在 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;
}

您不能将伪设置为块元素。图标应跟随文本的垂直位置。但是，如果您希望它居中而不管锚的线高/高度/填充，那么我目前没有答案。