将精灵图像与表格单元格的中心对齐

Question

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

下面是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 小提琴 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;

我的提琴手演示适用于我，如果它也适用于你，请告诉我

Answer 2

您可以将margin-left: 30%; 添加到您的#visa { css。您可以使用 % 来获得正确的位置，如果您愿意，甚至可以使用 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>
	<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>

希望对你有帮助

Answer 3

您对使用 jQuery 和插件的态度如何？ Backstretch 是一个插件，可以让您很好地设置背景图像，并且也适用于响应式设计。这是一个链接，看看它可能会有所帮助！

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

如果你不能使用 jQuery，那下面的呢：

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