⭐ 0
🔍
Tekst Obraz PDF i Dokumenty Audio Muzyka Elektronika Czas Użyteczne programy Walidatory Ezoteryka Gry

Jak wyśrodkować div w CSS (Flexbox)

Zbuduj wizualnie układ flexbox CSS: kierunek elastyczny, justowanie zawartości, wyrównanie elementów, elastyczne zawijanie i przerwa w kontenerze, a także elastyczny wzrost dla każdego dziecka, elastyczne kurczenie i elastyczna podstawa, wszystko z podglądem na żywo i kopiowalnym CSS.

Przetwarzanie... 0%

Wynik

Oto bezpośrednia odpowiedź na najczęściej zadawane pytanie w CSS: aby wyśrodkować element div, umieść display: flex, justify-content: center i wyrównanie-items: wyśrodkuj jego element nadrzędny. I tyle – trzy deklaracje na pojemniku, a dziecko siedzi w nim idealnie wyśrodkowane zarówno w poziomie, jak i w pionie, w dowolnym rozmiarze. Ta strona otwiera generator z dokładnie zastosowaną już kombinacją, więc poniższy podgląd pokazuje, że działa on obecnie na trzech ponumerowanych polach.

Przed Flexboxem centrowanie elementu div wymagało hacków: margines: 0 auto centrowany tylko w poziomie i działał tylko na bloku o stałej szerokości; centrowanie pionowe oznaczało pozycję: absolutną z ujemnymi marginesami lub sztuczkę z transformacją, obie kruche w momencie zmiany rozmiaru treści. justify-content obsługuje główną oś, a Align-Items obsługuje oś poprzeczną — razem centrują w obu kierunkach, niezależnie od tego, jak wysokie i szerokie jest dziecko, i właśnie dlatego ta para stała się standardową odpowiedzią.

Przeciągnij dowolną kontrolkę poniżej i obserwuj, jak trzy pola podglądu pozostają wyśrodkowane w miarę zmiany kształtu kontenera, lub dodaj odstęp między nimi. Kiedy wszystko będzie wyglądać dobrze, skopiuj blok CSS znajdujący się na dole bezpośrednio do arkusza stylów — działa on w ten sam sposób w każdej nowoczesnej przeglądarce, nie jest wymagana żadna biblioteka.

🛡️
Wykonywane w przeglądarce

Twoje pliki i dane nigdy nie opuszczają tego urządzenia. Przetwarzanie odbywa się całkowicie offline. W 100% bezpieczne.

Zasady i formaty

  • Elementy sterujące kontenera: kierunek zginania, justowanie zawartości, wyrównywanie elementów, zawijanie elastyczne i wprowadzanie odstępu w pikselach, stosowane na żywo do podglądu.
  • Domyślnie trzy pola podrzędne oznaczone kolorami (dodaj do ośmiu, usuń do dwóch), każde z własnymi polami flex-grow, flex-shrink i flex-base.
  • Kopiowalny blok CSS z regułą .flex-container plus jedna reguła .flex-item-N na każde dziecko, która ma inne niż domyślne właściwości flex.

Kluczowe korzyści

✓ Każda kontrola kontenera oraz funkcje flex-grow, flex-shrink i flex-base każdego dziecka aktualizują na żywo trzy ponumerowane pola podglądu, dzięki czemu możesz dokładnie zobaczyć, co robią reguły flexbox, zanim dotkniesz arkusza stylów.
✓ Generator drukuje tylko reguły podrzędne, które faktycznie różnią się od domyślnych ustawień CSS, więc skopiowany kod pozostaje krótki i czytelny, zamiast powtarzać flex-grow: 0 w każdym polu.
✓ Gotowe strony obsługują układy wyszukiwane przez użytkowników według nazwy: wyśrodkowanie elementu div, logo-lewy link-prawy pasek nawigacyjny i elastyczne kolumny o równej szerokości — otwórz jedną, a narzędzie jest już skonfigurowane.

Przypadki użycia

  • • Uzyskaj dokładny CSS, aby wyśrodkować element div zarówno w poziomie, jak i w pionie, obserwując działanie elementów justify-content i wyrównania w polach podglądu na żywo.
  • • Zbuduj układ paska nawigacyjnego z logo po lewej stronie i linkami po prawej stronie ze spacjami między elementami i wyrównaniem: wyśrodkuj, a następnie skopiuj CSS kontenera bezpośrednio do komponentu nagłówka.
  • • Porównaj przestrzeń pomiędzy, przestrzeń wokół i przestrzeń równomiernie obok siebie na tych samych trzech polach, zamiast zgadywać, który z nich odpowiada żądanemu odstępowi.