Как я могу разместить значок спрайта в середине моего квадратного 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; 

} 

He ре, как я создаю мой ящик:

<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

я понял свою собственную ошибку. Он работает после того, как я снимаю прокладку и использую вместо этого margin.

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

Результат: