0

我正在使用以下代码设置锚图标：

.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+上工作

用另一个元素包装不是解决方案

4

1 回答 1

0

我认为伪元素可能是你唯一的选择。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;
}

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

于 2013-11-02T00:21:35.973 回答