⭐ 0
🔍
Text Obrázok PDF a Dokumenty Audio Hudba Elektronika Čas Užitočné programy Validátory Ezoterika Hry

Ako vycentrovať div v CSS (Flexbox)

Vizuálne vytvorte rozloženie CSS flexbox: ohybné smerovanie, zarovnanie obsahu, zarovnanie položiek, ohybný obal a medzera na kontajneri, plus flex-grow, flex-shrink a flex-base na dieťa, to všetko so živým náhľadom a kopírovateľným CSS.

Spracovanie... 0%

Výsledok

Tu je priama odpoveď na najčastejšie kladenú otázku v CSS: ak chcete vycentrovať div, umiestnite display: flex, justify-content: center a align-items: center na jeho rodič. To je všetko – tri vyhlásenia na nádobe a dieťa v nej sedí dokonale vycentrované horizontálne aj vertikálne, a to v akejkoľvek veľkosti. Táto stránka otvorí generátor s presne touto už aplikovanou kombináciou, takže náhľad nižšie ukazuje, že práve teraz funguje na troch očíslovaných poliach.

Pred flexboxom potrebovalo centrovanie div hacky: margin: 0 auto len horizontálne vycentrované a fungovalo len na bloku s pevnou šírkou; vertikálne centrovanie znamenalo polohu: absolútnu so zápornými okrajmi alebo transformačný trik, oboje je krehké v momente, keď obsah zmení veľkosť. justify-content ovláda hlavnú os a align-items ovláda krížovú os – spolu sa vycentrujú v oboch smeroch bez ohľadu na to, aké vysoké alebo široké je dieťa, a práve preto sa táto dvojica stala štandardnou odpoveďou.

Potiahnite ľubovoľný ovládací prvok nižšie a sledujte, ako tri políčka ukážky zostanú vycentrované, keď kontajner mení tvar, alebo medzi ne pridajte medzeru. Keď to vyzerá správne, skopírujte blok CSS v spodnej časti priamo do šablóny so štýlmi – funguje to rovnako v každom modernom prehliadači, nepotrebujete žiadnu knižnicu.

🛡️
Spustené v prehliadači

Vaše súbory a vstupy nikdy neopustia toto zariadenie. Spracovanie prebieha úplne offline. 100% bezpečné.

Prijaté formáty a pravidlá

  • Ovládacie prvky kontajnera: flex-direction, justify-content, align-items, flex-wrap a zadávanie medzier v pixeloch, aplikované naživo na náhľad.
  • Štandardne tri farebne označené detské boxy (pridajte až osem, odstráňte dva), každá má svoje vlastné polia flex-grow, flex-shrink a flex-base.
  • Kopírovateľný blok CSS s pravidlom .flex-container plus jedno pravidlo .flex-item-N na dieťa, ktoré má iné ako predvolené vlastnosti flex.

Hlavné výhody

✓ Každý ovládací prvok kontajnera a každý detský flex-grow, flex-shrink a flex-base aktualizuje tri očíslované ukážkové boxy naživo, takže presne uvidíte, čo robia vaše pravidlá flexboxu predtým, než sa dotknete šablóny so štýlmi.
✓ Generátor vytlačí iba podriadené pravidlá, ktoré sa v skutočnosti líšia od predvolených nastavení CSS, takže skopírovaný kód zostane krátky a čitateľný namiesto toho, aby na každom poli znova uvádzal flex-grow: 0.
✓ Prednastavené stránky riešia rozloženia, ktoré ľudia hľadajú podľa názvu: vycentrovanie divu, logo-ľavé odkazy-pravá navigačná lišta a flexibilné stĺpce rovnakej šírky – otvorte jeden a nástroj je už nakonfigurovaný.

Prípady použitia

  • • Získajte presný CSS na vycentrovanie divu horizontálne aj vertikálne sledovaním fungovania justify-content a align-items na živých náhľadových poliach.
  • • Vytvorte rozloženie navigačného panela s logom vľavo, odkazy vpravo s medzerou medzi položkami a položkami zarovnania: na stred a potom skopírujte kontajner CSS priamo do komponentu hlavičky.
  • • Porovnajte priestor medzi, priestor okolo a priestor rovnomerne vedľa seba na rovnakých troch poliach namiesto toho, aby ste hádali, ktoré z nich zodpovedá požadovanému rozstupu.