Kui r\u00e4\u00e4kida arendusest, siis ma ei r\u00e4\u00e4gi sageli asjadest peale PHP ja JavaScripti peamiselt seet\u00f5ttu, et t\u00f6\u00f6tan nende keeltega rohkem kui teistega.<\/p>\n
Ma m\u00f5tlen, jah, CSS on osa tehingust, nagu ka HTML, kuid t\u00e4nap\u00e4eval on seda oodata, eks?<\/p>\n
Nii et kui mul oli kunagi CSS-i kohta kiire n\u00e4pun\u00e4ide, siis see on see (kuigi v\u00f5ib-olla peaksin rohkem kirjutama?). On raske, kui Chris<\/a><\/strong> teeb nii suurep\u00e4rast t\u00f6\u00f6d CSS Tricksi<\/a><\/strong> juhtimisel, kuid ma kaldun k\u00f5rvale.<\/p>\n Igatahes, siin on probleem ja lahendus.<\/p>\n Elemendi d\u00fcnaamilise tsentreerimise idee p\u00f5hineb j\u00e4rgmisel stsenaariumil:<\/p>\n V\u00f5ib-olla on see siiski natuke \u00fcldine. Kui jah, siis oletame, et teil on nimekiri (j\u00e4rjestatud v\u00f5i j\u00e4rjestamata, vahet pole). Neil on fikseeritud k\u00f5rgus ja laius ning te paigutate pildid skaleeritult igasse elemendisse.<\/p>\n Pidage meeles: te ei saa paigutada asju, n\u00e4iteks div<\/strong> – elemente li<\/strong> – elementidesse (kuna div<\/strong> on plokitaseme element), ilma seda m\u00f5ne CSS-i kaudu muutmata. Ja me tahame seda v\u00e4ltida.<\/p>\n Nii et l\u00f5ppkokkuv\u00f5ttes v\u00f5ib kasutajaliides v\u00e4lja n\u00e4ha umbes selline (toores, ma tean):<\/p>\n Kui soovite, et iga pilt paigutataks loendi\u00fcksusesse, et sellel oleks teatud m\u00f5\u00f5tkava k\u00f5rgus ja soovite, et see oleks keskel, proovige j\u00e4rgmist koodi<\/a><\/strong> :<\/p>\n Selle v\u00f5ti on tegelikult transformeerimisstiil. MDN andmetel<\/a><\/strong> :<\/p>\n Funktsioon translateY() CSS paigutab elemendi \u00fcmber vertikaalselt 2D-tasandil. Selle tulemuseks on andmet\u00fc\u00fcp.<\/p>\n<\/blockquote>\n On loogiline?<\/p>\n M\u00f5elge sellele j\u00e4rgmiselt: funktsioon translateY<\/strong> v\u00f5tab etteantud elemendi (selektoriga tuvastatud) ja positsioneerib selle m\u00e4\u00e4ratud v\u00e4\u00e4rtuse abil.<\/p>\n Selle teostamiseks v\u00f5ite kasutada piksleid, protsente v\u00f5i mida iganes vajate. Sel juhul on tegemist protsendiga (ja need on negatiivsed). Kuigi ma kasutan oma juurutamise n\u00e4idet, on see m\u00f5eldud ka n\u00e4pun\u00e4itena selle kohta, kuidas kasutada funktsiooni transformY<\/strong> seoses teisendustega.<\/p>\n Kui brauseri \u00fchilduvus on oluline \u2013 mis m\u00f5nel juhul peakski olema \u2013, vaadake seda tabelit<\/a><\/strong>. Sa oled p\u00e4ris h\u00e4sti kaetud.<\/p>\nElemendi d\u00fcnaamiline tsentreerimine konteineris<\/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
See r\u00e4\u00e4gib transformatsioonidest<\/h2>\n