Question

我曾经有一张作为背景的图片：

#myIco{
    background:url(/i/myIco.gif) no-repeat center top;
}

因此，当我将该id放入表格单元格时，它会将图标放在单元格的中间。

我决定将所有图标组合成一个精灵图像。

.sprites{
    background-image:url(/i/mySprites.png);
    background-color: transparent;
    background-repeat:no-repeat;
    border:0;
}

新图标的值为：

#axXh {
    background-position: -33px -83px;
    width: 33px;
    height: 11px;
}

但现在我的图标不再位于表格单元格的中心。我该如何解决？

Answer 1

这很棘手。您必须将图标封装在自己的<span>或<div>中，然后将其水平放置在中心位置。我是精灵的粉丝，并且说你决定使用它们。

<style>
  div { text-align: center; } /* or consider margin: 0 auto; */
  .sprites {
    background-image: url('/i/mySprites.png');
    background-color: transparent;
    background-repeat: no-repeat;
    border:0;
  }
  .icon {
    background-position: -33px -83px;
    width: 33px;
    height: 11px;
  }
</style>

<div>
  <span class="sprites icon"></span>
</div>

定位精灵图片

1 个答案: