Elementin keskittäminen dynaamisesti säilössä CSS:n avulla

Mitä tulee kehityksestä kirjoittamiseen, en usein puhu PHP:n ja JavaScriptin ulkopuolisista asioista pääasiassa siksi, että työskentelen näiden kielten kanssa enemmän kuin muiden.

Tarkoitan, joo, CSS on osa sopimusta, kuten HTMLkin, mutta sitä odotetaan nykyään, eikö niin?

Joten jos minulla oli joskus tarjota pikavinkki koskien CSS:ää, tämä on se (vaikka minun pitäisi kirjoittaa enemmän?). On vaikeaa, kun Chris tekee niin mahtavaa työtä CSS Tricks -työkalun avulla, mutta minä poikkean.

Joka tapauksessa, tässä on ongelma ja ratkaisu.

Elementin keskittäminen dynaamisesti säilössä

Ajatus elementin dynaamisesta keskittämisestä perustuu seuraavaan skenaarioon:

• Soitat sovellusliittymälle, joka vastaa esimerkiksi kuvilla, kun puhelu on valmis.
• Sinun on keskitettävä jokainen kuva sen säilöön.
• Kuvilla ei ole kiinteää korkeutta, ja ne on sijoitettava dynaamisesti ja keskitettävä käyttöliittymän säilöihin.

Ehkä tämä on vielä hieman yleistä. Jos on, oletetaan, että sinulla on luettelo (järjestetty tai järjestämätön, sillä ei ole väliä). Niillä on kiinteä korkeus ja leveys, ja aiot sijoittaa kuvat skaalattuna jokaisen elementin sisään.

Muista: et voi sijoittaa esimerkiksi div – elementtejä li – elementteihin (koska div on lohkotason elementti) muuttamatta sitä jollain CSS:llä. Ja haluamme välttää sen tekemästä.

Joten loppujen lopuksi käyttöliittymä voi näyttää suunnilleen tältä (raaka, tiedän):

Jos haluat, että jokainen kuva sijoitetaan luettelokohteeseen, haluat sen olevan tietyssä skaalatussa korkeudessa ja haluat sen olevan keskellä, kokeile seuraavaa koodin bittiä :

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

Avain tähän on todellakin muutostyyli. MDN:n mukaan :

TranslateY() CSS-funktio sijoittaa elementin uudelleen pystysuoraan 2D-tasolle. Sen tulos on tietotyyppi.

Käydä järkeen?

Ajattele asiaa näin: translateY – funktio ottaa tietyn elementin (valitsimella tunnistetun) ja sijoittaa sen käyttämällä määritettyä arvoa.

Kyse on muunnuksista

Voit käyttää pikseleitä, prosenttiosuuksia tai mitä tahansa tarvitsemasi sen toteuttamiseksi. Tässä tapauksessa se on prosenttiosuus (ja ne ovat negatiivisia). Vaikka käytän esimerkkiä toteutuksestani, sen on tarkoitus olla myös vinkki transformY –  funktion käyttöön muunnoksissa.

Jos selaimen yhteensopivuudella on merkitystä – minkä joissain tapauksissa sen pitäisi olla – katso tämä taulukko. Olet varsin hyvin peitetty.