Question

嗨，我正在尝试在较小的范围内创建类似的东西，以便在我用自己的图标说明字体真棒。

我有三个图标：

sell.png (20px x 20px)
buy.png (20px x 20px)
cma.png (20px x 20px)

我的目标是让背景图像在左侧，并在文本的中间垂直对齐。

这是我到目前为止所做的，但如果它有效，那么......我不会在这里！

<span class="amls amls-buy">buy</span>
<span class="amls amls-sell">sell</span>
<span class="amls amls-cma">cma</span>

的CSS：

.amls {
    display: inline-block;
    font-style: normal;
    padding-left: 22px;
    position: relative;
    :before {
        background-repeat: none;
        content: "";
        display: block;
        position: absolute;
        left: 0; top: 2px;
        height: 20px;
        width: 20px;    
    }
}

.amls-buy:before {
    background-image: url('img/buy.png')
}

Answer 1

您可以使用background-repeat: no-repeat;和background-size: auto 100%;来简化它并将图标设置为跨度的背景图像（而不是之前的那个），以使其适合您的跨度。保持跨度上的填充，使图标位于填充内。

这里是JSFiddle。：）

css / less背景图标位于左侧和居中位置

1 个答案: