Mit\u00e4 tulee kehityksest\u00e4 kirjoittamiseen, en usein puhu PHP:n ja JavaScriptin ulkopuolisista asioista p\u00e4\u00e4asiassa siksi, ett\u00e4 ty\u00f6skentelen n\u00e4iden kielten kanssa enemm\u00e4n kuin muiden.<\/p>\n
Tarkoitan, joo, CSS on osa sopimusta, kuten HTMLkin, mutta sit\u00e4 odotetaan nyky\u00e4\u00e4n, eik\u00f6 niin?<\/p>\n
Joten jos minulla oli joskus tarjota pikavinkki koskien CSS:\u00e4\u00e4, t\u00e4m\u00e4 on se (vaikka minun pit\u00e4isi kirjoittaa enemm\u00e4n?). On vaikeaa, kun Chris<\/a><\/strong> tekee niin mahtavaa ty\u00f6t\u00e4 CSS Tricks -ty\u00f6kalun<\/a><\/strong> avulla, mutta min\u00e4 poikkean.<\/p>\n Joka tapauksessa, t\u00e4ss\u00e4 on ongelma ja ratkaisu.<\/p>\n Ajatus elementin dynaamisesta keskitt\u00e4misest\u00e4 perustuu seuraavaan skenaarioon:<\/p>\n Ehk\u00e4 t\u00e4m\u00e4 on viel\u00e4 hieman yleist\u00e4. Jos on, oletetaan, ett\u00e4 sinulla on luettelo (j\u00e4rjestetty tai j\u00e4rjest\u00e4m\u00e4t\u00f6n, sill\u00e4 ei ole v\u00e4li\u00e4). Niill\u00e4 on kiinte\u00e4 korkeus ja leveys, ja aiot sijoittaa kuvat skaalattuna jokaisen elementin sis\u00e4\u00e4n.<\/p>\n Muista: et voi sijoittaa esimerkiksi div<\/strong> – elementtej\u00e4 li<\/strong> – elementteihin (koska div<\/strong> on lohkotason elementti) muuttamatta sit\u00e4 jollain CSS:ll\u00e4. Ja haluamme v\u00e4ltt\u00e4\u00e4 sen tekem\u00e4st\u00e4.<\/p>\n Joten loppujen lopuksi k\u00e4ytt\u00f6liittym\u00e4 voi n\u00e4ytt\u00e4\u00e4 suunnilleen t\u00e4lt\u00e4 (raaka, tied\u00e4n):<\/p>\n Jos haluat, ett\u00e4 jokainen kuva sijoitetaan luettelokohteeseen, haluat sen olevan tietyss\u00e4 skaalatussa korkeudessa ja haluat sen olevan keskell\u00e4, kokeile seuraavaa koodin bitti\u00e4<\/a><\/strong> :<\/p>\n Avain t\u00e4h\u00e4n on todellakin muutostyyli. MDN:n mukaan<\/a><\/strong> :<\/p>\n TranslateY() CSS-funktio sijoittaa elementin uudelleen pystysuoraan 2D-tasolle. Sen tulos on tietotyyppi.<\/p>\n<\/blockquote>\n K\u00e4yd\u00e4 j\u00e4rkeen?<\/p>\n Ajattele asiaa n\u00e4in: translateY<\/strong> – funktio ottaa tietyn elementin (valitsimella tunnistetun) ja sijoittaa sen k\u00e4ytt\u00e4m\u00e4ll\u00e4 m\u00e4\u00e4ritetty\u00e4 arvoa.<\/p>\n Voit k\u00e4ytt\u00e4\u00e4 pikseleit\u00e4, prosenttiosuuksia tai mit\u00e4 tahansa tarvitsemasi sen toteuttamiseksi. T\u00e4ss\u00e4 tapauksessa se on prosenttiosuus (ja ne ovat negatiivisia). Vaikka k\u00e4yt\u00e4n esimerkki\u00e4 toteutuksestani, sen on tarkoitus olla my\u00f6s vinkki transformY<\/strong> – \u00a0funktion k\u00e4ytt\u00f6\u00f6n muunnoksissa.<\/p>\n Jos selaimen yhteensopivuudella on merkityst\u00e4 \u2013 mink\u00e4 joissain tapauksissa sen pit\u00e4isi olla \u2013 katso t\u00e4m\u00e4 taulukko<\/a><\/strong>. Olet varsin hyvin peitetty.<\/p>\nElementin keskitt\u00e4minen dynaamisesti s\u00e4il\u00f6ss\u00e4<\/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
Kyse on muunnuksista<\/h2>\n