html - 将 Sprite 图像与表格单元格的中心对齐

Question

我用我们所有的图标图像制作了一个 sprite，因为相同的图像重复了很多次，我不希望它一遍又一遍地加载。

下面是CSS代码的例子

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

Visa 图标在表格中可见，但它向左对齐，我需要它居中

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

我尝试使用 P 标签和 td 标签居中对齐 aligh:center 和 text-align:center;两者都不适合我。

我尝试了一些位置类但无法正常工作，但我可能没有正确使用它。

我还想对单元格进行其他样式设置，例如填充顶部/底部，但我需要先对其进行排序。

我可以尝试什么？

这是 JS fiddle https://jsfiddle.net/dave5000/v4cgeo9z/

Answer 1

试试这个:

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

我真的不知道你的图像的大小，但我想这会成功。

编辑:

对于错误的信息，我很抱歉，我从我的例子中复制的搞砸了..

这个怎么样？

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

编辑 2:

添加演示后，我能够生成此解决方案: Fiddler Demo

我删除了

left: 0;

并添加了下一个 css 行:

display: inline-block;

我的 fiddler demo 对我有用，所以让我知道它是否也对你有用