位置スプライト画像

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>