Merhaba arkadaşlar. Şu kodları kullanarak sprite oluşturdum:

.heroes {
background-image: url('/media/heroes/heroes-sprite.png');
background-repeat: no-repeat;
background-position: center center;
display: block;
}

.heroes-abathur {
width: 64px;
height: 72px;
background-position: 0px 0px;

Ardından ilgili class'ları tablo hücrelerine yerleştirerek şu tabloyu oluşturdum: http://i.imgur.com/YXhbEfP.png

Ancak resimde de gördüğünüz üzere tablet ve mobil görünümlerde spritelar ortaya hizalanmıyor (aslında masaüstünde de tam ortalanmış değiller fakat tablodaki padding kodları sayesinde ortalanmış gibi gözüküyor). Yukarıdaki kodda da yer aldığı üzere background-position: center center; kullandım ama işe yaramadı.

Sprite'ları tam ortaya hizalamak için ne tür bir kodlama yapmam gerekir?