css - 如何将作为 Sprite 表一部分的 div 背景图像居中？

Question

我有一个 sprite 表作为 div 中的背景图像。

我想只显示一个 Sprite 作为背景图片，同时让 Sprite 居中。我该怎么做？

Answer 1

如果您的背景图像是垂直对齐的 Sprite 表，您可以像这样将每个 Sprite 水平居中:

#center-me {
    background-image: url('images/sprite-sheet.png'); 
    background-repeat: none;
    background-position: 50% [y position of sprite];
}

如果您的背景图像是水平对齐的 Sprite 表，您可以像这样垂直居中每个 Sprite :

#center-me {
    background-image: url('images/sprite-sheet.png'); 
    background-repeat: none;
    background-position: [x position of sprite] 50%;
}

如果您的 sprite 表很紧凑，其中有多个行和列，则这些解决方案不适用。