Как да се съгласуват центъра на бутоните на иконата

Общият размер на цялото изображение 48x48 пиксела отделно всяка икона - 24x24 съответно. Бутони квадрат, без текст със символа в центъра - всичко е много просто.
Трудността се състои в това, че ако добавите изображения директно към ключов елемент като фон, чрез CSS и по този начин да се уточни позицията на желаното изображение, приведе в центъра, да се забрани повтарянето, а след това около, с една или друга партия, в зависимост от позицията на избраната икона ще остане видими образи, останали част от спрайт.

#myButton височина: 48px;
ширина: 48px;
фон-цвят: darkorange;
фон изображение: URL ( "../ IMG / ми-icons.png ');
фон-повторение: не-повторение;
фон-позиция: 12px 12px;
>

За да се реши този проблем с CSS, без допълнително HTML тагове за единица бутон, трябва да добавите псевдо :: преди. за който се задава височината и ширината размерите на съответните размерите на изображението до желаната икона, в този случай - 24px да 24px.

#myButton височина: 48px;
ширина: 48px;
фон-цвят: darkorange;
кутия оразмеряване граница кутия;
подложка покрив: 12px;
>
#myButton :: преди дисплей: блок;
съдържание: "";
фон изображение: URL ( "../ IMG / ми-икона-min.png ');
фон-позиции: 0 0;
фон цвят: прозрачен;
фон-повторение: не-повторение;
височина: 24px;
ширина: 24px;
марж: 0 автомобил;
>

Ето едно просто решение. Надявам се да бъде от полза.

Послепис Честно казано, съжалявам, за да използвате този случай псевдо-елемент, тъй като тя може да бъде по-конструктивно да използвате, и е винаги на разположение, за да се свържете икони на шрифта. но в продължение на четири прости бутони, достатъчно за мен и факта, че има.