위치 스프라이트 이미지

Question

나는 배경으로 배치 된 이미지를 가지고하는 데 사용됩니다.

내 모든 아이콘을 하나의 스프라이트 이미지로 결합하기로 결정했습니다.

#axXh { 
    background-position: -33px -83px; 
    width: 33px; 
    height: 11px; 
} 

하지만 지금 내 아이콘이 테이블 셀의 중심에 더 이상 :

.sprites{ 
    background-image:url(/i/mySprites.png); 
    background-color: transparent; 
    background-repeat:no-repeat; 
    border:0; 
} 

새로운 아이콘에 대한 값은 없습니다. 어떻게 수정해야합니까?

Answer 1

그건 까다 롭습니다. 아이콘 자체를 <span> 또는 <div> 안에 캡슐화 한 다음 가운데에 수평으로 배치해야합니다. 나는 스프라이트에 대한 열렬한 팬이고 당신이 그들을 사용하기로 결심했다.

<style> 
    div { text-align: center; } /* or consider margin: 0 auto; */ 
    .sprites { 
    background-image: url('/i/mySprites.png'); 
    background-color: transparent; 
    background-repeat: no-repeat; 
    border:0; 
    } 
    .icon { 
    background-position: -33px -83px; 
    width: 33px; 
    height: 11px; 
    } 
</style> 

<div> 
    <span class="sprites icon"></span> 
</div>