如何将我的精灵图标放在方形div的中间？

Question

首先，我的sprites.png看起来像是：

其次，我声明我的 sprite 类：

.sprite {
   background: url('sprites.png') no-repeat; float: left;
}

第三，我只需要铅笔图标，所以我创建了一个像这样的铅笔类：

.pencil {

background-position: -110px 0px; 
width: 24px;
height: 24px;
padding-left: 5px;
padding-top: 5px;

}

以下是我创建盒子的方法：

<div class="tl-box-wrapper">
    <div class="tl-box">
        <div class="tl-top"> <div class="sprite pencil"></div>

        </div>
        <div class="tl-bot"> <i class="fa fa-pencil-square-o"></i>

        </div>
        <div class="tl-right"><span class="tl-text"> Course<br>Benchmark<br>Pre-Test</span></div>
    </div>
</div>

这是我的结果：

我很高兴让我的精灵图片显示正确的图标，但我不确定如何将精灵图标放在左上角的框中。

有人可以教我怎么做吗？

感谢您的时间。

Answer 1

我发现了自己的错误。在我取消填充并使用边距后，它可以正常工作。

.pencil {
background-position: -110px 0px; 
width: 24px;
height: 24px;
margin-left: 8px;
margin-top: 8px;
}

结果：