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

Jak vycentrovat Div v CSS (Flexbox)

Vizuálně sestavte rozvržení flexboxu CSS: flex-direction, justify-content, align-items, flex-wrap and gap na kontejneru, plus flex-grow, flex-shrink a flex-base na dítě, to vše s živým náhledem a kopírovatelným CSS.

Zpracování... 0%

Výsledek

Zde je přímá odpověď na nejčastěji kladenou otázku v CSS: chcete-li prvek div vycentrovat, umístěte na jeho nadřazený prvek display: flex, justify-content: center a align-items: center. To je ono – tři deklarace na kontejneru a dítě v něm sedí perfektně vycentrované jak vodorovně, tak svisle, v jakékoli velikosti. Tato stránka otevře generátor s přesně touto již použitou kombinací, takže náhled níže ukazuje, že právě teď funguje na třech očíslovaných polích.

Před flexboxem potřebovalo centrování divu hacky: margin: 0 auto pouze horizontálně centrované a fungovalo pouze na bloku s pevnou šířkou; vertikální centrování znamenalo pozici: absolutní se zápornými okraji nebo transformační trik, obojí je křehké v okamžiku, kdy obsah změní velikost. justify-content zpracovává hlavní osu a align-items zpracovává křížovou osu — společně se vycentrují v obou směrech bez ohledu na to, jak je dítě vysoké nebo široké, což je přesně důvod, proč se tato dvojice stala standardní odpovědí.

Přetáhněte libovolný ovládací prvek níže a sledujte, jak tři rámečky náhledu zůstávají uprostřed, jak kontejner mění tvar, nebo mezi ně přidejte mezeru. Když to vypadá správně, zkopírujte blok CSS ve spodní části přímo do šablony stylů – funguje to stejně v každém moderním prohlížeči, není potřeba žádná knihovna.

🛡️
Spuštěno v prohlížeči

Vaše soubory a vstupy nikdy neopustí toto zařízení. Zpracování probíhá zcela offline. 100% bezpečné.

Přijaté formáty a pravidla

  • Ovládací prvky kontejneru: flex-direction, justify-content, align-items, flex-wrap a zadávání mezery v pixelech, aplikované živě na náhled.
  • Ve výchozím nastavení tři barevně odlišené dětské boxy (přidat až osm, odebrat až dva), každý s vlastními poli flex-grow, flex-shrink a flex-base.
  • Kopírovatelný blok CSS s pravidlem .flex-container plus jedním pravidlem .flex-item-N na dítě, které má jiné než výchozí vlastnosti flex.

Hlavní výhody

✓ Každý ovládací prvek kontejneru a každý dětský flex-grow, flex-shrink a flex-base aktualizuje naživo tři očíslovaná náhledová pole, takže přesně uvidíte, co vaše pravidla flexboxu dělají, než se dotknete šablony stylů.
✓ Generátor vytiskne pouze podřízená pravidla, která se ve skutečnosti liší od výchozích hodnot CSS, takže zkopírovaný kód zůstane krátký a čitelný místo toho, aby na každém poli znovu uváděl flex-grow: 0.
✓ Přednastavené stránky řeší rozvržení, která lidé hledají podle jména: vycentrování divu, logo-levé odkazy-pravá navigační lišta a flexibilní sloupce stejné šířky – otevřete jeden a nástroj je již nakonfigurován.

Případy použití

  • • Získejte přesný CSS pro vycentrování prvku div vodorovně i svisle tím, že budete sledovat, jak položky justify-content a align-items fungují na polích živého náhledu.
  • • Vytvořte rozložení navigační lišty vlevo s logem, vpravo s odkazy s mezerou mezi položkami a položkami zarovnání: na střed a poté zkopírujte kontejner CSS přímo do komponenty záhlaví.
  • • Porovnejte prostor mezi, prostorem a prostorem rovnoměrně vedle sebe na stejných třech polích, místo abyste hádali, která z nich odpovídá požadovanému rozestupu.