Aligning a sprite image to center of a table cell - html

Question

I made a sprite with all our icon images as the same image repeats a lot and I didn't want it loading over and over.
Below is an example of the CSS code
#visa{background: url('sprite.png') -69px 0; left: 0; width: 87px; height: 36px;}
The Visa icon is visible in the table, but it's aligned to the left, I need it alighted center
<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>
I've tried to align center the P tag and the td tag using
aligh:center and text-align:center; neither are working for me.
I tried some position classes but couldn't get it working, but i may not have been using it correctly.
there is other styling I'd like to do to the cell as well like padding top/bottom but I need to get this sorted first.
What can I try ?
here is JS fiddle
https://jsfiddle.net/dave5000/v4cgeo9z/

Answer 1

Try this:
#visa{
background: url('sprite.png');
background-size: 36px;
background-position: center;
left: 0;
width: 87px;
height: 36px;
}
Don't really know the sizes of your image, but I guess this will do the trick.
EDIT:
Sorry for the wrong info, I messed up with copying from my example..
How about this?
#visa{
background: url('sprite.png');
background-repeat: no-repeat;
background-position: center;
display: block;
left: 0;
width: 87px;
height: 36px;
}
EDIT 2:
After you added the demo, I was able to generate this solution:
Fiddler Demo
I removed the
left: 0;
and added the next css line:
display: inline-block;
My fiddler demo works for me, so let me know if it works for you as well

Answer 2

You can add margin-left: 30%; to your #visa { css. You can play around with the % to get the correct position, or even use px if you like.
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>
<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>
Hope it helped

Answer 3

How open are you to using jQuery and plugins? Backstretch is a plugin that lets you set background images nicely, and works well with responsive design also. Here is a link, take a look it might be helpful!
http://www.jquery-backstretch.com/
If you can't use jQuery, what about the following:
<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;
}