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>

我尝试使用P中心对齐P标签和td标签 aligh：center and text-align：center;他们都没有为我工作。

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

还有其他样式我想要对单元格进行填充顶部/底部但是我需要首先对其进行排序。

我可以尝试什么？

这是JS小提琴 https://jsfiddle.net/dave5000/v4cgeo9z/

Answer 1

您对使用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;
}

Answer 2

试试这个：

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

您可以将margin-left: 30%;添加到#visa { css。您可以使用％来获取正确的位置，或者如果您愿意，甚至可以使用px。

＆＃13;

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

＆＃13;

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

＆＃13;

希望有所帮助

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

3 个答案: