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

Question

首先这是我的 sprites.png 样子：

其次，我这样声明我的 sprite class：

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

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

.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>

这是我的结果：

我很高兴我的 sprite 图像显示正确的图标，但我不确定如何将我的 sprite 图标定位在左上角框的中心。

有人可以教我怎么做吗？

感谢您的宝贵时间。

Answer 1

我想出了自己的错误。它在我取消 padding 并改用 margin 后起作用。

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

结果：

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

How can I position my sprite icon in the middle of my square div?

html

css

icons

css-sprites

css-position