Środkowanie w CSS

Poznaj 5 technik wyrównywania, które są poddawane serii testów, aby sprawdzić, która z nich jest najbardziej odporna na zmiany.

Wyśrodkowywanie w CSS to słynne wyzwanie, które wiąże się z żartami i drwinami. 2020 CSS jest już dorosłe, więc możemy się śmiać z tych żartów, a nie tylko z zaciśniętymi zębami.

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

Wyzwanie

Istnieją różne typy wyśrodkowania. Od różnych przypadków użycia, liczby rzeczy do wyśrodkowania itp. Aby zademonstrować uzasadnienie „zwycięskiej” techniki wyśrodkowywania, stworzyłem The Resilience Ringer. To seria testów obciążeniowych dla każdej strategii wyrównywania, aby zachować równowagę i obserwować skuteczność. Na koniec ujawniam technikę, która przynosi najwyższą liczbę punktów, a także „najcenniejszą”. Mamy nadzieję, że udało Ci się poznać nowe techniki i rozwiązania dotyczące wyśrodkowywania.

The Resilience Ringer

Strategia Resilience Ringer jest wyrazem mojego przekonania, że strategia centrowania powinna być odporna na układy międzynarodowe, zmienne rozmiary widocznego obszaru, zmiany w tekście i dynamiczną zawartość. Te zasady pomogły nam opracować testy odporności na działanie technik centralizacji:

  1. Squished: centering should be able to handle changes to width
  2. Squashed: centering should be able to handle changes to height
  3. Duplikat: wyśrodkowanie powinno być dynamiczne w stosunku do liczby elementów
  4. Edytuj: wyśrodkowanie powinno być dynamiczne w zależności od długości i języka treści
  5. Proces: wyśrodkowanie powinno być niezależne od kierunku i trybu pisania dokumentu.

Zwycięskie rozwiązanie powinno wykazać się odpornością na ściskanie, zgniecenie, powielenie, edycję i przestawienie na różne tryby językowe i kierunki. godne zaufania i odporne na awarie centrum, bezpieczne centrum;

Legenda

Aby ułatwić Ci zachowanie metainformacji, dodałem kolorowe wskazówki wizualne:

  • Różowa obwódka wskazuje własność stylów wyrównywania do środka
  • Szary kwadrat to tło kontenera, w którym mają się znaleźć elementy pośrodku
  • Każdy element podrzędny ma białe tło, dzięki czemu możesz zobaczyć wpływ techniki wyśrodkowywania na rozmiary elementów podrzędnych (jeśli takie występują).

5 uczestników

5 technik centrowania wejdzie do Resilience Ringer, ale tylko jedna otrzyma Resilience Crown 👸.

1. Centrum treści

Edytowanie i powielanie treści za pomocą VisBug
  1. Squish: świetnie.
  2. Squash: świetnie.
  3. Duplikat: świetnie!
  4. Edytuj: świetnie.
  5. Flow: świetnie.

Trudno będzie pokonać zwięzłość display: grid i skrót place-content. Ponieważ wyrównuje i wyśrodkowuje elementy zbiorczo, jest to solidna technika wyśrodkowania dla grup elementów przeznaczonych do czytania.

.content-center {
  display: grid;
  place-content: center;
  gap: 1ch;
}
Zalety
  • Treści są wyśrodkowane nawet w przypadku ograniczonej przestrzeni i przepełnienia
  • Edycje i konserwacja centrowania w jednym miejscu
  • Przerwa zapewnia równe odstępy między n dziećmi
  • Siatka tworzy wiersze domyślnie
Wady
  • Najszerszy element podrzędny (max-content) określa szerokość wszystkich pozostałych elementów. Więcej informacji na ten temat znajdziesz w artykule Gentle Flex.

Doskonale nadaje się do układów makro zawierających akapity i nagłówki, prototypów lub ogólnie elementów, które wymagają czytelnego wyśrodkowania.

2. Gentle Flex

  1. Squish: świetnie.
  2. Squash: świetnie.
  3. Duplikat: świetnie!
  4. Edit: świetnie.
  5. Przepływ: świetnie.

Delikatne dostosowanie to strategia polegająca na prawdziwym wyśrodkowywaniu tylko. Jest ona łagodna i delikatna, ponieważ w przeciwieństwie do place-content: center podczas wyśrodkowywania nie zmienia się rozmiarów pudełek z zabawkami. Wszystkie elementy są ułożone w stosie, wyśrodkowane i oddalone od siebie w jak najbardziej delikatny sposób.

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}
Zalety
  • Obsługuje tylko wyrównywanie, kierowanie i dystrybucję.
  • Edycje i utrzymanie w jednym miejscu
  • Przerwa zapewnia równe odstępy między n dziećmi
Wady
  • Najwięcej wierszy kodu

Doskonale nadają się zarówno do układów makro, jak i mikro.

3. Autobot

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

Kontener ma ustawiony tryb flex bez stylów wyrównania, a bezpośredni podrzędny ma styl z automatycznymi marginesami. Jest coś nostalgicznego i cudownego w tym, że margin: auto działa na wszystkich krawędziach elementu.

.autobot {
  display: flex;
}
.autobot > * {
  margin: auto;
}
Zalety
  • Zabawna sztuczka
  • Szybka i niedopracowana
Wady
  • Niewygodne wyniki podczas przepełnienia
  • Używanie dystrybucji zamiast przerwy oznacza, że układy mogą zawierać elementy dotykane krawędzi
  • „Wciśnięcie” dziecka do pozycji nie wydaje się optymalnym rozwiązaniem i może spowodować zmianę rozmiaru pudełka dziecka.

Doskonale nadaje się do wyśrodkowywania ikon lub pseudoelementów.

4. Fluffy Center

  1. Squish: zły
  2. Squash: zły
  3. Duplikat: zły
  4. Edit: świetnie.
  5. Przepływ: świetnie. (o ile używasz właściwości logicznych)

Uczestnik „puszyste centrum” to zdecydowanie nasza najsmaczniejsza propozycja, a jednocześnie jedyna technika centrowania, która jest całkowicie własnością elementu podrzędnego. Zobacz nasz pojedynczy wewnętrzny obrys różowy

.fluffy-center {
  padding: 10ch;
}
Zalety
  • Ochrona treści
  • Atom
  • Każdy test zawiera potajemnie tę strategię wyśrodkowania
  • Przestrzeń między wyrazami to luka
Wady
  • Iluzja nieprzydatności
  • Występuje konflikt między kontenerem a elementami, ponieważ każdy z nich ma bardzo ściśle określone rozmiary.

Doskonale nadaje się do centralnego pozycjonowania słów lub wyrażeń, tagów, etykiet, przycisków, elementów i innych elementów.

5. Pop & Plop

  1. Squish: okay
  2. Squash: okay
  3. Duplikat: zły
  4. Edytuj: fine
  5. Przepływ: prawidłowy.

Element „wysuwa się”, ponieważ pozycjonowanie bezwzględne wyrzuca go poza normalny przepływ. Nazwa „plop” pochodzi od słowa „plop”, które oznacza „wrzucanie” czegoś na inne rzeczy. Jest to klasyczna i poręczna technika wyśrodkowywania nakładki, która jest elastyczna i dynamicznie dostosowuje się do rozmiaru treści. Czasami wystarczy po prostu umieścić interfejs na innym interfejsie.

Zalety
  • Przydatne
  • Niezawodność
  • Gdy tego potrzebujesz, jest bezcenna
Wady
  • Kod z ujemnymi wartościami procentowymi
  • Wymaga position: relative, aby wymusić blokowanie zawartości
  • Wczesne i niewygodne podziały wiersza
  • W każdym bloku może być tylko 1 element.

Doskonale nadaje się do modali, toastów i wiadomości, stosów i efektów głębi oraz wyskakujących okienek.

Zwycięzca

Gdybym był na bezludnej wyspie i mógł wybrać tylko jedną technikę wyśrodkowywania, byłaby to…

[bęben]

Gentle Flex 🎉

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

Zawsze znajdziesz go w moich arkuszach stylów, ponieważ jest on przydatny zarówno w przypadku makro-, jak i mikro-layoutów. To wszechstronne, niezawodne rozwiązanie, które spełnia moje oczekiwania. Poza tym jestem uzależniona od określania rozmiarów, więc często korzystam z tego rozwiązania. To prawda, że trzeba wpisać sporo znaków, ale korzyści z tego wynikające przewyższają długość kodu.

MVP

Fluffy Center

.fluffy-center {
  padding: 2ch;
}

Fluffy Center jest tak mikro, że łatwo można przeoczyć tę technikę wyśrodkowywania, ale jest ona podstawą moich strategii wyśrodkowywania. Jest tak atomowy, że czasem zapominam, że go używam.

Podsumowanie

Co może zakłócić działanie strategii wyśrodkowywania? Jakie inne wyzwania można dodać do dźwięku odporności? Rozważałem tłumaczenie i automatyczne przełączanie wysokości kontenera… co jeszcze?

Teraz, gdy już wiesz, jak to zrobić, jak Ty to zrobisz? Zróżnicuj swoje podejścia i poznaj wszystkie sposoby tworzenia stron internetowych. Aby utworzyć własny przykład wyśrodkowania, podobny do przykładów w tym poście, skorzystaj z codelab dołączonego do tego posta. Wyślij mi tweeta ze swoją wersją, a dodam ją do sekcji Remiksy społeczności poniżej.

Remiksy społeczności