Hogyan, hogy összehangolják a központ a ikongombok

Hogyan, hogy összehangolják a központ a ikongombok

A teljes mérete a teljes kép 48x48 pixel külön minden egyes ikon - 24x24 ill. Gombok tér, nincs szöveg, a szimbólum a központban - minden nagyon egyszerű.
A nehézség abban rejlik, hogy ha hozzá képeket közvetlenül kulcseleme, mint a háttér, a CSS, így pozícióját adja meg a kívánt képet, igazítsa a központtól, hogy megtiltsák az ismétlés, majd körül, hogy az egyik fél, vagy egy másik, attól függően, hogy a helyzet a kiválasztott ikon marad látható kép többi része a sprite.

#myButton magasság: 48px;
szélesség: 48px;
background-color: darkorange;
background-image: url ( '../ img / my-icons.png');
background-repeat: no-repeat;
background-position: 12px 12px;
>

A probléma megoldására a CSS, anélkül, hogy további HTML-címkét a készülék alját, akkor meg kell adni a pszeudo :: előtt. amelyekre beállítani a magasság és a szélesség méretei a mindenkori méretei képet a kívánt ikont, ebben az esetben - a 24px 24px.

#myButton magasság: 48px;
szélesség: 48px;
background-color: darkorange;
box-méretezés: border-box;
padding-top: 12px;
>
#myButton :: előtt display: block;
tartalom: '';
background-image: url ( '../ img / my-icon-min.png');
background-position: 0 0;
background-color: átlátszó;
background-repeat: no-repeat;
magasság: 24px;
szélesség: 24 képpont;
margin: 0 auto;
>

Itt van egy egyszerű megoldás. Remélem, hogy hasznos lehet.

Ui Őszintén sajnálom, hogy használni ebben az esetben egy pszeudo-elem, mert ez lehet több konstruktív használható, és mindig rendelkezésre áll csatlakozni font ikonok. de négy egyszerű gombok, nekem elég, és az a tény, hogy van.