⭐ 0
🔍
Besedilo Slika PDF in dokumenti Avdio Glasba elektronika Čas Pripomočki Validatorji Ezoterika igre

Kako centrirati Div v CSS (Flexbox)

Vizualno zgradite postavitev CSS flexbox: flex-direction, justify-content, align-items, flex-wrap in vrzel na vsebniku ter flex-grow, flex-shrink in flex-basis na otroka, vse s predogledom v živo in CSS-jem, ki ga je mogoče kopirati.

Obdelava ... 0%

Rezultat

Tukaj je neposreden odgovor na najpogosteje zastavljeno vprašanje v CSS: če želite centrirati div, postavite display: flex, justify-content: center in align-items: center na njegovega starša. To je to — tri deklaracije na posodi in otrok sedi popolnoma na sredini tako vodoravno kot navpično znotraj nje, ne glede na velikost. Ta stran odpre generator z natančno to kombinacijo, ki je že uporabljena, tako da spodnji predogled prikazuje, da trenutno deluje na treh oštevilčenih poljih.

Pred flexboxom je centriranje diva zahtevalo vdore: margin: 0 samodejno centrirano samo vodoravno in je delovalo samo na bloku s fiksno širino; navpično centriranje je pomenilo položaj: absolutno z negativnimi robovi ali trik transformacije, oboje je krhko v trenutku, ko je vsebina spremenila velikost. justify-content obravnava glavno os in align-items obravnava prečno os - skupaj se centrirata v obe smeri, ne glede na to, kako visok ali širok je otrok, ravno zato je ta par postal standardni odgovor.

Povlecite poljuben kontrolnik spodaj in si oglejte, kako tri polja za predogled ostanejo na sredini, ko vsebnik spremeni obliko, ali dodajte vrzel med njimi. Ko je videti pravilno, kopirajte blok CSS na dnu naravnost v vašo datoteko slogov - deluje na enak način v vseh sodobnih brskalnikih, knjižnica ni potrebna.

🛡️
Izvedeno v brskalniku

Vaše datoteke in vnosi nikoli ne zapustijo te naprave. Obdelava poteka popolnoma brez povezave. 100 % varno.

Sprejeti formati in pravila

  • Kontrolniki vsebnika: flex-direction, justify-content, align-items, flex-wrap in vnos vrzeli v slikovnih pikah, uporabljen v živo za predogled.
  • Privzeto trije barvno kodirani podrejeni okvirji (dodajte do osem, odstranite do dva), vsako s svojimi polji flex-grow, flex-shrink in flex-basis.
  • Blok CSS, ki ga je mogoče kopirati, s pravilom .flex-container in enim pravilom .flex-item-N na podrejenega elementa, ki ima lastnosti flex, ki niso privzete.

Ključne prednosti

✓ Vsak kontrolnik vsebnika in flex-grow, flex-shrink in flex-basis vsakega otroka posodabljajo tri oštevilčena polja za predogled v živo, tako da natančno vidite, kaj počnejo vaša pravila flexboxa, preden se dotaknete tabele slogov.
✓ Generator natisne le podrejena pravila, ki se dejansko razlikujejo od privzetih nastavitev CSS, tako da ostane kopirana koda kratka in berljiva, namesto da bi ponovno navedel flex-grow: 0 na vsakem polju.
✓ Prednastavljene strani rešujejo postavitve, ki jih ljudje iščejo po imenu: centriranje diva, logotip-leve povezave-desna vrstica za krmarjenje in prilagodljivi stolpci enake širine – odprite eno in orodje je že konfigurirano.

Primeri uporabe

  • • Pridobite natančen CSS za centriranje div tako vodoravno kot navpično, tako da opazujete delo poravnave vsebine in poravnave elementov na poljih za predogled v živo.
  • • Zgradite postavitev vrstice za krmarjenje z logotipom levo in povezavo desno s presledkom med in align-items: center, nato kopirajte CSS vsebnika naravnost v komponento glave.
  • • Primerjajte razmik med, razmik okoli in enakomerno razmik enega poleg drugega na istih treh poljih, namesto da ugibate, kateri se ujema z želenim razmikom.