Elemendi dünaamiline tsentreerimine konteineris CSS-i abil

Kui rääkida arendusest, siis ma ei räägi sageli asjadest peale PHP ja JavaScripti peamiselt seetõttu, et töötan nende keeltega rohkem kui teistega.

Ma mõtlen, jah, CSS on osa tehingust, nagu ka HTML, kuid tänapäeval on seda oodata, eks?

Nii et kui mul oli kunagi CSS-i kohta kiire näpunäide, siis see on see (kuigi võib-olla peaksin rohkem kirjutama?). On raske, kui Chris teeb nii suurepärast tööd CSS Tricksi juhtimisel, kuid ma kaldun kõrvale.

Igatahes, siin on probleem ja lahendus.

Elemendi dünaamiline tsentreerimine konteineris

Elemendi dünaamilise tsentreerimise idee põhineb järgmisel stsenaariumil:

• Helistate API-le, mis vastab pärast kõne lõppemist näiteks piltide komplektiga.
• Peate iga pildi oma konteineris tsentreerima.
• Piltidel ei ole fikseeritud kõrgust ja need tuleb dünaamiliselt paigutada ja kasutajaliidese konteinerites keskele asetada.

Võib-olla on see siiski natuke üldine. Kui jah, siis oletame, et teil on nimekiri (järjestatud või järjestamata, vahet pole). Neil on fikseeritud kõrgus ja laius ning te paigutate pildid skaleeritult igasse elemendisse.

Pidage meeles: te ei saa paigutada asju, näiteks div – elemente li – elementidesse (kuna div on plokitaseme element), ilma seda mõne CSS-i kaudu muutmata. Ja me tahame seda vältida.

Nii et lõppkokkuvõttes võib kasutajaliides välja näha umbes selline (toores, ma tean):

Kui soovite, et iga pilt paigutataks loendiüksusesse, et sellel oleks teatud mõõtkava kõrgus ja soovite, et see oleks keskel, proovige järgmist koodi :

.acme-element {
  position:   relative;
  top:        50%;
  transform:  translateY(-50%);
  height:     auto;
  max-height: 190px;
}

Selle võti on tegelikult transformeerimisstiil. MDN andmetel :

Funktsioon translateY() CSS paigutab elemendi ümber vertikaalselt 2D-tasandil. Selle tulemuseks on andmetüüp.

On loogiline?

Mõelge sellele järgmiselt: funktsioon translateY võtab etteantud elemendi (selektoriga tuvastatud) ja positsioneerib selle määratud väärtuse abil.

See räägib transformatsioonidest

Selle teostamiseks võite kasutada piksleid, protsente või mida iganes vajate. Sel juhul on tegemist protsendiga (ja need on negatiivsed). Kuigi ma kasutan oma juurutamise näidet, on see mõeldud ka näpunäitena selle kohta, kuidas kasutada funktsiooni transformY seoses teisendustega.

Kui brauseri ühilduvus on oluline – mis mõnel juhul peakski olema –, vaadake seda tabelit. Sa oled päris hästi kaetud.