⭐ 0
🔍
Text Imagine PDF și Documente Audio Muzică Electronică Timp Utilitare Validatoare Ezoterism Jocuri

Cum să centrați un Div în CSS (Flexbox)

Creați vizual un aspect CSS flexbox: flex-direction, justificare-conținut, aliniere-articole, flex-wrap și decalaj pe container, plus flex-grow per copil, flex-shrink și flex-basis, toate cu o previzualizare live și CSS copiabil.

Procesare... 0%

Rezultat

Iată răspunsul direct la cea mai pusă întrebare în CSS: pentru a centra un div, pune display: flex, justify-content: center și align-items: center on its parent. Gata — trei declarații pe recipient, iar copilul stă perfect centrat atât pe orizontală, cât și pe verticală în interiorul acestuia, la orice dimensiune. Această pagină deschide generatorul cu exact acea combinație deja aplicată, așa că previzualizarea de mai jos arată că lucrează pe trei casete numerotate chiar acum.

Înainte de flexbox, centrarea unui div avea nevoie de hack-uri: margin: 0 auto centrat numai pe orizontală și lucrat doar pe un bloc cu lățime fixă; centrarea verticală însemna poziție: absolută cu margini negative sau un truc de transformare, ambele fragile în momentul în care conținutul și-a schimbat dimensiunea. justify-content se ocupă de axa principală și align-items se ocupă de axa transversală - împreună se centrează în ambele direcții, indiferent de cât de înalt sau de lat este copilul, tocmai de aceea această pereche a devenit răspunsul standard.

Trageți orice control de mai jos și urmăriți ca cele trei casete de previzualizare rămân centrate pe măsură ce containerul își schimbă forma sau adăugați un spațiu între ele. Când arată corect, copiați blocul CSS din partea de jos direct în foaia de stil - rulează la fel în orice browser modern, fără bibliotecă necesară.

🛡️
Rulat în browser

Fișierele și datele introduse nu părăsesc niciodată acest dispozitiv. Procesarea rulează complet offline. 100% sigur.

Formate și reguli acceptate

  • Controale pentru container: direcție flexibilă, conținut justificat, aliniere a elementelor, înfășurare flexibilă și o introducere a decalajului în pixeli, aplicată în direct previzualizării.
  • În mod implicit, trei casete copil codificate cu culori (adăugați până la opt, eliminați până la două), fiecare cu propriile câmpuri flex-grow, flex-shrink și flex-basis.
  • Bloc CSS copiabil cu o regulă .flex-container plus o regulă .flex-item-N per copil care are proprietăți flexibile care nu sunt implicite.

Beneficii cheie

✓ Fiecare control container și flex-grow, flex-shrink și flex-base ale fiecărui copil actualizează trei casete de previzualizare numerotate, astfel încât să vedeți exact ce fac regulile dumneavoastră flexbox înainte de a atinge o foaie de stil.
✓ Generatorul tipărește doar reguli copil care diferă de fapt de valorile implicite CSS, astfel încât codul copiat rămâne scurt și lizibil în loc să reintroducă flex-grow: 0 pe fiecare casetă.
✓ Paginile prestabilite rezolvă aspectele pe care oamenii le caută după nume: centrarea unui div, un logo-legături din stânga-bara de navigare din dreapta și coloane flexibile cu lățime egală - deschideți unul și instrumentul este deja configurat.

Cazuri de utilizare

  • • Obțineți CSS exact pentru a centra un div atât pe orizontală, cât și pe verticală, urmărind conținutul justificat și elementele de aliniere lucrând în casetele de previzualizare live.
  • • Creați un aspect al barei de navigare cu logo-stânga, linkuri-dreapta cu spațiu între și elemente de aliniere: centrați, apoi copiați containerul CSS direct în componenta antet.
  • • Comparați spațiul dintre, spațiul în jur și spațiul uniform unul lângă altul pe aceleași trei casete, în loc să ghiciți care dintre ele se potrivește cu distanța dorită.