如何將我的精靈圖標放在方形div的中間？

Question

首先這裏是我的sprites.png樣子：

其次，我宣佈我精靈類是這樣的：

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

結果：