Środkowanie w CSS

Wykonaj 5 testów 5 technik centrowania, aby sprawdzić, która z nich jest najbardziej odporna na zmiany.

Adam Argyle

Korzystanie z CSS to nie lada wyzwanie, ale pełne żartów i żartów. 2020 CSS to ludzie dorośli. Teraz możemy śmiać się szczerze z tych dowcipów, a nie przez zaciśnięte zęby.

Jeśli wolisz film, oto wersja tego posta na YouTube:

Wyzwanie

Istnieją różne rodzaje wyśrodkowania. Różne przypadki użycia, liczby elementów do sprawdzenia itd. Aby pokazać uzasadnienie najskuteczniejszej techniki centrowania, stworzyłam „Dzwonek odporności”. To seria testów obciążeniowych każdej strategii środkowej, aby zrównoważyć wewnętrzne działanie i obserwować ich skuteczność. Na koniec znajdę technikę najwyższej punktacji oraz „najbardziej wartościową”. Mam nadzieję, że zaczniesz korzystać z nowych technik centrowania i rozwiązań.

Dzwonek odporności

Wskaźnik odporności odzwierciedla moje przekonanie, że strategia wyśrodkowania powinna być odporna na układy międzynarodowe, widoczne obszary o zmiennych rozmiarach, edycje tekstu i treści dynamiczne. Te założenia pomogły sformułować następujące testy wytrzymałości stosowanej w przypadku technik centrowania:

1. Ściśnięty: wyśrodkowanie powinno obsługiwać zmiany szerokości.
2. Ściśnięty: wyśrodkowanie powinno obsługiwać zmiany wysokości.
3. Duplikat: centrowanie powinno być dynamiczne w odniesieniu do liczby elementów
4. Edytuj: centrowanie powinno być dynamiczne w zależności od długości i języka treści
5. Przepływ: wyśrodkowanie powinno być niezależne od kierunku dokumentu i trybu pisania

Zwycięskie rozwiązanie powinno wykazywać się odpornością dzięki umieszczaniu treści w środkowej części strony przy jednoczesnym ściskaniu, ściskaniu, duplikowaniu, edytowaniu i zastępowaniu różnych trybów językowych i kierunków. Wiarygodne i odporne centrum, w którym każdy znajdzie coś dla siebie.

Legenda

Oto wizualne wskazówki dotyczące kolorów, które pomogą Ci zachować metadane w kontekście:

• Różowe obramowanie wskazuje, że masz style wyśrodkowania
• Szare pole to tło pojemnika, w którym elementy mają być wyśrodkowane.
• Każdy element podrzędny ma białe tło, więc można zobaczyć, jaki wpływ na rozmiary jego pól podrzędnych ma technika środkowania.

5 uczestników

Na Dzwonek odporności bierze udział 5 technik centrowania, a tylko jedna z nich otrzyma Koronę Odporności 👸.

1. Centrum treści

1. Squish: świetnie.
2. Squash: świetnie.
3. Duplikat: świetnie!
4. Edytowanie: świetnie.
5. Flow: świetnie!

Ciężko będzie pokonać zwięzłość tekstu display: grid i skrótu „place-content”. Ponieważ wywiera na dzieci odpowiedni kontekst, jest to solidna technika wyśrodkowania dla grup elementów przeznaczonych do czytania.

.content-center {
  display: grid;
  place-content: center;
  gap: 1ch;
}

Świetne w przypadku układów makr zawierających akapity, nagłówki, prototypy lub elementy, które zwykle wymagają czytelnego wyśrodkowania.

2. Delikatne opanowanie

1. Squish: świetnie.
2. Squash: świetnie.
3. Duplikat: świetnie!
4. Edytuj: świetnie.
5. Flow: świetnie!

Gentle Flex to prawdziwa strategia tylko środkowa. Jest miękka i delikatna, ponieważ w przeciwieństwie do place-content: center rozmiar pudełka dziecięcego się nie zmienia podczas środkowania. Wszystkie elementy powinny być ułożone w stos, wyśrodkowane i umieszczone w odpowiednich odstępach.

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}

Doskonały do układów makro i mikro.

3. Autobot

1. Squish: świetnie
2. Squash: świetny
3. Duplikat: prawidłowy
4. Edytuj: świetnie
5. Przepływ: świetny

Kontener jest ustawiony w tryb elastyczny bez stylów wyrównania, a w bezpośrednich elementach podrzędnych są stylizowane z automatycznymi marginesami. margin: auto działa z każdej strony elementu nostalgicznego i niesamowitego.

.autobot {
  display: flex;
}
.autobot > * {
  margin: auto;
}

Świetny do wyśrodkowania ikon lub pseudoelementów.

4. Centrum puszystym

1. Squish: zły
2. Squash: słaby
3. Duplikat: nieprawidłowy
4. Edytuj: świetnie.
5. Flow: świetnie! (o ile używasz właściwości logicznych)

„puszyste centrum” to nasz najbardziej agresywny rywal i jedyna technika centrowania, która w całości należy do dziecka. Zobacz naszą wewnętrzną różową obwódkę solo!?

.fluffy-center {
  padding: 10ch;
}

Świetne do wyśrodkowania na słowach lub wyrażeniach, tagów, pigułek, przycisków, elementów i nie tylko.

5. Pop i plop

1. Squish: dobrze
2. Squash: dobrze
3. Duplikat: nieprawidłowy
4. Edytuj: dobrze
5. Przepływ: prawidłowy

Ten element „wyskakuje”, ponieważ pozycjonowanie bezwzględne wyskakuje element z normalnego przepływu. Nazwy, które pojawiają się jako „plakietki”, pochodzą wtedy, gdy są dla mnie najbardziej przydatne: nakładają je na inne elementy. To klasyczna i przydatna technika wyśrodkowywania nakładek, która jest elastyczna i dostosowuje się do rozmiaru treści. Czasami trzeba po prostu umieścić go na innym interfejsie.

Idealne do modali, tostów i wiadomości, stosów i efektów głębi oraz wyskakujących okienek.

Zwycięzca

Gdybym znalazła się na wyspie i mogła mieć tylko 1 technikę środkową, to...

[drum roll]

Delikatne ćwiczenia 🎉

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}

Zawsze możesz go znaleźć w moich arkuszach stylów, bo jest przydatny zarówno w przypadku układów makro, jak i mikro. To wszechstronne, niezawodne rozwiązanie, które zapewnia wyniki zgodne z moimi oczekiwaniami. Poza tym ze względu na to, że jestem wrodzonym uzależnionym od rozmiarów, zwykle wybieram to rozwiązanie. To prawda, że można napisać dużo informacji, ale korzyści, jakie z tego wiążą, przeważają nad dodatkowym kodem.

Najbardziej wartościowy zawodnik (MVP)

Fluffy Center

.fluffy-center {
  padding: 2ch;
}

Fluffy Center jest na tyle mała, że łatwo ją przeoczyć jako technikę centrowania, ale to jedna z moich strategii wyśrodkowywania. Jest tak atomowe, że czasem zapominam, że go używałam.

Podsumowanie

Jakiego typu elementy zakłócają Twoje strategie centrowania? Jakie jeszcze wyzwania można dodać do dzwonka odporności? Zastanawiam się nad tłumaczeniem i automatycznym przełącznikiem wysokości kontenera... Co jeszcze?

Skoro już wiesz, jak to udało mi się osiągnąć, to jak? Poznajmy różne podejścia i nauczmy się korzystać z internetu. Wykonaj ćwiczenia z programowania opisane w tym poście, aby utworzyć własny przykład wyśrodkowania, taki jak te przedstawione w tym poście. Wyślij mi tweeta do swojej wersji, a dodam ją do sekcji Remiksy społeczności poniżej.

Remiksy społeczności

• Porady dotyczące CSS z postem na blogu.