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设置为left时，这非常有用。当锚点宽度设置为100％并且text-align是中心时，有没有办法让这个图标从文本显示为-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;
}

您不能将伪设置为块元素。图标应遵循文本的垂直位置。但是如果你想让它居中，而不管锚的线高/高/填充，那么我现在没有答案。

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

1 个答案: