スプライトイメージを表のセルの中心に合わせる

Question

同じイメージがたくさん繰り返されるので、私はすべてのアイコンイメージでスプライトを作成しましたが、何度も繰り返し読み込む必要はありませんでした。以下は

は、CSSコード

#visa{background: url('sprite.png') -69px 0; left: 0; width: 87px; height: 36px;} 

ビザのアイコンが表に表示されている例であるが、それを左に並んだ、私はそれは私がしました

<tr> 
<td><p id="visa"></p></td> 
<td><p>Visa</p></td> 
<td><img src="ok.png"></td> 
<td><img src="ok.png"></td> 
</tr> 

センター降り必要 alighを使用してPタグとtdタグの中心を揃えようとしました：centerとtext-align：center;どちらも私のために働いていません。

私はいくつかのポジションクラスを試しましたが、動作させることができませんでしたが、正しく使用していない可能性があります。

他にもスタイリングがあります。セルにもトップ/ボトムのようにしたいと思いますが、まずこれをソートする必要があります。

私は何を試すことができますか？ここ

は、JSのフィドルが https://jsfiddle.net/dave5000/v4cgeo9z/

Answer 1

はこれを試してみてください：

#visa{ 
    background: url('sprite.png'); 
    background-size: 36px; 
    background-position: center; 
    left: 0; 
    width: 87px; 
    height: 36px; 
} 

が本当にあなたのイメージのサイズを知ってはいけません、しかし、私はこれがトリックを行うだろうと思う。

EDIT：

間違った情報のため申し訳ありません

、私は...私の例からコピーして、この程度

方法を台無しに？

#visa{ 
    background: url('sprite.png'); 
    background-repeat: no-repeat; 
    background-position: center; 
    display: block; 
    left: 0; 
    width: 87px; 
    height: 36px; 
} 

EDIT 2：

デモを追加した後、私はこのソリューションを生成することができました： Fiddler Demo

私は

left: 0; 

を削除し、次のCSSラインを追加しました：

display: inline-block; 

マイシオマネキのデモは、それがあなたの#visa { CSSに同様

Answer 2

であるあなたはjQueryとプラグインを使用してどのように開いていますか？ Backstretchは、バックグラウンドイメージをうまく設定できるプラグインで、レスポンシブデザインでもうまく機能します。ここにリンクがありますので、参考にしてみてください！あなたが何を以下についてのjQueryを使用できない場合

http://www.jquery-backstretch.com/

：

<tr> 
    <td> 
     <p id="visa"> 
      <img src="sprite.png" /> 
     </p> 
    </td> 
    <td><p>Visa</p></td> 
    <td><img src="ok.png"></td> 
    <td><img src="ok.png"></td> 
</tr> 

#visa{ 
    width: 87px; 
    height: 36px; 
} 
#visa img { 
    width: 87px; 
    height: 36px; 
    display: block; 
    margin: 0 auto; 
} 

Answer 3

あなたはmargin-left: 30%;を追加することができますあなたのために働くなら、私に知らせて、私のために動作します。あなたは正しい位置を得るために％で遊んでもいいし、好きなときにはpxを使うこともできる。

th { 
 
    text-align: center!important; 
 
} 
 

 
thead > tr > th { 
 
    padding:20px!important; 
 
    background-color: #9fc5d0; 
 
} 
 

 
td { 
 
    text-align: center!important; 
 
    border: 1px solid #bdbdbd; 
 
} 
 

 
#visa { 
 
    background: url('http://www.davidstokes.com/1/payments/gg-sprite.png') -69px 0; 
 
    margin-left: 30%; 
 
    width: 87px; 
 
    height: 36px; 
 
}

<table> 
 
\t <thead> 
 
    <tr> 
 
     <th colspan="2" width="40%">Method</th> 
 
     <th width="20%">Deposit</th> 
 
     <th width="20%">Withdrawal</th> 
 
     
 
    </tr> 
 
    </thead> 
 
<tbody> 
 
<tr> 
 
    <td><p id="visa"></p></td> 
 
    <td>Visa</td> 
 
    <td><img src="https://cdn0.iconfinder.com/data/icons/Free-PSD-blogging-icons-Bimbilini/32/ok.png"></td> 
 
    <td><img src="https://cdn0.iconfinder.com/data/icons/Free-PSD-blogging-icons-Bimbilini/32/ok.png"></td> 
 
    
 
</tr> 
 
<tr> 
 
<td><p id="visa"></p></td> 
 
    <td>Visa</td> 
 
    <td><img src="https://cdn0.iconfinder.com/data/icons/Free-PSD-blogging-icons-Bimbilini/32/ok.png"></td> 
 
    <td><img src="https://cdn0.iconfinder.com/data/icons/Free-PSD-blogging-icons-Bimbilini/32/ok.png"></td> 
 
    
 
</tr> 
 
</tbody> 
 
</table>

あなたは `バックグラウンドポジションを追加しようとしたことがあり、それは