CODEWITHSUNDEEP
htmlcssiconscss-positioncss-sprites
code-8
code-8

Reputation: 58662

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

First here is my sprites.png look like:

enter image description here

Second, I declare my sprite class like this : 

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

Third, I only need the pencil icon, so I created a pencil class like this :

.pencil {

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

}

Here is how I create my box:

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

Here is my result:

I'm very happy to get my sprite image to display the right icon, but I'm not sure how to position my sprite icon in the center of top left box.

Can someone please teach me how to do this ?

Thank you for your time.

enter image description here

Upvotes: 1

Views: 246

Answers (1)

code-8
code-8

Reputation: 58662

I figured my own mistake. It works after I take off padding and use margin instead.

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

Result:

enter image description here

Upvotes: 4

Related Questions