Css 指南针精灵的背景位置不是我想要的

我是第一次使用指南针。我想让图标图像（大小都有点不同）居中。喜欢附件中的图片吗

我正在使用这个设置

$icons-spacing:40px;
@import "icons/*.png";
@include all-icons-sprites;

我得到的css是（例如）

---

不是我要求的那样。我希望从顶部和左侧提供更多的间距。

$icons spating

定义在生成的精灵贴图中分隔每个图像的像素数。我相信您想要调整

$icons位置

，它调整（偏移）生成的

背景位置

样式

首先，一个好问题

当您在CSS中提供精灵时，您将能够生成具有

.image name

的类。这就是指南针精灵的工作原理。您的图像将附加到一个大精灵图像，所有不规则图像将以网格方式聚集在一起

尽管

$icons space

可以为网格提供一些填充，但在这种情况下，将其放置起来并不容易。因此，继续进行生成的操作，我们将执行以下操作

因此，如果您想要类似图片的内容，则需要将元素居中，该元素具有Compass生成的类

现在，假设您有

adventure.png

，它已经生成了这个类：

.icons-adventure {
    background-position: 0 -608px;
}

现在，如果你想让它居中，你可以这样做

<div class="border">
    <i class="icons-adventure"></i>
</div>

---

在这里，不需要高度，因为高度会自动调整。让我拿一把小提琴来给你一个清晰的解释。

你可能想看看这个Github的要点：，它帮助我解决了过去的精灵问题，也更好地理解了指南针中的精灵是如何工作的

您可能特别感兴趣的是作者提到以下内容的部分：（粘贴在此处，以防删除要点）

“我进一步定义了自己的（精灵）混音。”

“我是如何使用它的”

并且，作者生成的CSS：

h3 {
  background-image: url('/images/spritemap-sb826ca2aba.png');
  background-repeat: no-repeat;
  background-position: 0 -405px;
  height: 29px;
  width: 295px; }

h2 {
  background-image: url('/images/spritemap-sb826ca2aba.png');
  background-repeat: no-repeat;
  background-position: 3px -296px; }

#positions {
  background-image: url('/images/spritemap-sb826ca2aba.png');
  background-repeat: repeat-x;
  background-position: 0 -751px; }

---

我找到了两种解决此问题的方法，但都不完美：

您只需在图像编辑器中使用必要的填充来保存图标即可。如果您只想在一个位置使用图标，则可以使用该图标，否则必须创建重复的图标（这就是为什么不总是有效的原因）

另一种解决方案是使用伪元素。假设是要添加背景的元素，并且已将图标放置在图标文件夹中：

---

如果您知道图标的大小，可以为所有图标设置默认高度，并为单个图标提供垂直偏移（默认高度-图标高度）/2，并将其与中心水平放置：

$sprite-spacing: 50px;
@import "compass/utilities/sprites";
@import "sprite/*.png";
@include all-sprite-sprites;
$sprite: sprite-map("sprite/*.png", $spacing: 50px);

@include sprite-sprite(myicon);
@include sprite-background-position($sprite, myicon, center, 12px);

---

如果您使用的是Bootstrap 3，只需使用以下代码，它简单明了

SASS文件

@import "compass";
$home-spacing : 10px;
$home-sprite-dimensions : true;
@import "web/images/home/*.png";
@include all-home-sprites;

在HTML/Slim文件中，我只使用了我的HTML助手TwitterBootstrap3提供的

中心块

=content_tag('div','',:class=>'home-save_money center-block')

基本上，它只是将图像居中对齐到div的中心，上面所有的答案都使用了一些定制的mixin或hack

PS：即使你不使用twitter引导，也只需使用以下CSS即可

display: block;
margin-left: auto;
margin-right: auto;

---

我希望这对一些人有所帮助，

如何给出垂直图标位置？垂直图标位置似乎不可用。但是看看ctrlaltdel的答案，它解决了这个问题。你能给我看一下简单CSS中的“我想要这个”例子吗？我不想添加额外的div元素来让精灵居中。我知道我可以不用额外的div手动完成这项工作，但我想知道如何使用compass获取它。@JitendraVyas只是可以使用compass自定义的可能值。最好的值应该是

$icons spating

。是的，我知道$icons spating，但它仅适用于水平间距。前面也提到过这一点，我也遇到了伪元素解决方案。但这只适用于容器，而不适用于输入字段。我认为这是最有用的答案。非常感谢-这不是本机的指南针功能，但它实现了本主题中要求的功能。

@import "icons/*.png";

el { 
  position: relative; 
}

el:after { 
  content: ""; 
  position: absolute; 
  left: 50%; 
  top: 50%; 
  @include icons-sprite(some_icon); 
  margin-top: - round(icons-sprite-height(some_icon) / 2); 
  margin-left: - round(icons-sprite-width(some_icon) / 2);    
}

$sprite-spacing: 50px;
@import "compass/utilities/sprites";
@import "sprite/*.png";
@include all-sprite-sprites;
$sprite: sprite-map("sprite/*.png", $spacing: 50px);

@include sprite-sprite(myicon);
@include sprite-background-position($sprite, myicon, center, 12px);

@import "compass";
$home-spacing : 10px;
$home-sprite-dimensions : true;
@import "web/images/home/*.png";
@include all-home-sprites;

=content_tag('div','',:class=>'home-save_money center-block')

display: block;
margin-left: auto;
margin-right: auto;