Cum să aliniați pictograma cu centrul butonului
Dimensiunea totală a întregii imagini este de 48x48 pixeli, fiecare pictogramă fiind separată de 24x24. Butoanele sunt pătrate, fără text, cu un simbol în centru - totul este foarte simplu.
Dificultatea constă în faptul că, dacă adăugați imagini direct la un element-cheie ca fundal, prin CSS, astfel pentru a specifica poziția imaginii dorite, aliniați centrul, pentru a interzice repetarea, apoi în jurul valorii, cu o parte sau alta, în funcție de poziția pictogramei selectate va rămâne părți ale imaginilor rămase ale sprite sunt vizibile.
#myButton Height: 48px;
lățime: 48px;
fundal-culoare: darkorange;
fundal-imagine: url ('../ img / my-icons.png');
background-repeat: nu-repeta;
fundal-poziție: 12px 12px;
>
Pentru a rezolva această problemă utilizând CSS, fără etichete HTML suplimentare pentru blocul de butoane, trebuie să adăugați pseudo-elementul :: înainte. pentru care setați dimensiunile înălțimii și lățimii corespunzătoare dimensiunii imaginii cu pictograma dorită, în acest caz - de la 24px la 24px.
#myButton Height: 48px;
lățime: 48px;
fundal-culoare: darkorange;
box-size: caseta de margine;
padding-top: 12px;
>
#myButton :: înainte de afișare: bloc;
conținut: '';
fundal-imagine: url ('../ img / my-icon-min.png');
pozitie pozitie: 0 0;
fundal-culoare: transparent;
background-repeat: nu-repeta;
înălțime: 24px;
lățime: 24px;
marja: 0 auto;
>
Iată o soluție simplă. Sper că va fi util.
P.S. Sincer, este păcat să folosim pentru acest caz un pseudo-element întreg, deoarece poate fi aplicat mai constructiv și este întotdeauna posibilă conectarea icoanelor de fonturi. dar de dragul a patru butoane simple, este suficient pentru mine și asta este.