Как центрировать фоновое изображение div, которое является частью листа спрайтов?

Question

У меня есть лист спрайта в качестве фонового изображения внутри div.

Я бы хотел показать только один спрайт в качестве фонового изображения, но также центр спрайта. Как я могу это сделать?

Answer 1

Если фоновое изображение представляет собой вертикально спрайт лист, вы по горизонтали может центрировать каждый спрайт, как это:

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

Если фоновое изображение горизонтально выровнены спрайт лист, вы можете вертикально центрировать каждый спрайт, как это :

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

Если ваш лист спрайтов компактный, где несколько строк и столбцов, то эти решения не применяются.