Quando si tratta di scrivere di sviluppo, non parlo spesso di cose oltre a PHP e JavaScript principalmente perch\u00e9 lavoro con quei linguaggi pi\u00f9 di altri.<\/p>\n
Voglio dire, s\u00ec, CSS fa parte dell’accordo cos\u00ec come HTML, ma \u00e8 previsto in questi giorni, giusto?<\/p>\n
Quindi, se c’\u00e8 mai stato un suggerimento rapido da offrire per quanto riguarda i CSS, \u00e8 questo (anche se forse dovrei scrivere di pi\u00f9?). \u00c8 difficile quando Chris<\/a><\/strong> fa un lavoro cos\u00ec fantastico eseguendo CSS Tricks<\/a><\/strong>, ma sto divagando.<\/p>\n Comunque, ecco il problema e la soluzione.<\/p>\n L’idea di centrare dinamicamente un elemento si basa sul seguente scenario:<\/p>\n Forse questo \u00e8 ancora un po’ generale. Se \u00e8 cos\u00ec, supponiamo che tu abbia una lista (ordinata o non ordinata, non importa). Hanno un’altezza e una larghezza fisse e posizionerai le immagini, in scala, all’interno di ogni elemento.<\/p>\n Ricorda: non puoi posizionare elementi come\u00a0 elementi div<\/strong> all’interno di elementi li<\/strong> (perch\u00e9 un div<\/strong> \u00e8 un elemento a livello di blocco) senza modificarlo tramite alcuni CSS. E vogliamo evitare di farlo.<\/p>\n Quindi, alla fine, l’interfaccia utente potrebbe assomigliare a questo (grezzo, lo so):<\/p>\n Se vuoi che ogni immagine sia posizionata all’interno dell’elemento dell’elenco, vuoi che abbia una certa altezza in scala e vuoi che sia centrata, prova il seguente bit di codice<\/a><\/strong> :<\/p>\n La chiave per questo, davvero, \u00e8 lo stile di trasformazione. Secondo MDN<\/a><\/strong> :<\/p>\n La funzione translateY() CSS riposiziona un elemento verticalmente sul piano 2D. Il risultato \u00e8 un tipo di dati.<\/p>\n<\/blockquote>\n Ha senso?<\/p>\n Pensala in questo modo: la funzione translateY<\/strong> prender\u00e0 un dato elemento (identificato dal suo selettore) e lo posizioner\u00e0 usando il valore specificato.<\/p>\n Puoi usare pixel, percentuali o qualunque cosa ti serva per realizzarlo. In questo caso, sono le percentuali (e sono negative). Sebbene io stia usando un esempio della mia implementazione, vuole anche essere un suggerimento su come usare la funzione transformY<\/strong> in relazione alle trasformazioni.<\/p>\n Se la compatibilit\u00e0 del browser \u00e8 importante, cosa che, in alcuni casi, dovrebbe, dai un’occhiata a questo grafico<\/a><\/strong>. Sei abbastanza ben coperto.<\/p>\nCentratura dinamica di un elemento in un contenitore<\/h2>\n
\n
.acme-element {\n position: relative;\n top: 50%;\n transform: translateY(-50%);\n height: auto;\n max-height: 190px;\n}<\/code><\/pre>\n\n
Si tratta di trasformazioni<\/h2>\n