Środkowanie w CSS

Poddaj je 5 technikom centrowania, aby sprawdzić, który z nich jest najbardziej odporny na zmiany.

Adam Argyle

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

Dostępne są różne rodzaje centrowania. 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 metodę o najwyższej punktacji i „najcenniejszej”. Mam nadzieję, że przypomnisz sobie o nowych technikach i rozwiązaniach dotyczących centrowania.

The Resilience Ringer

Pierścień odporności to odzwierciedlenie mojej opinii, że strategia pozycjonowania 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 błędy dla technik pozycjonowania, które mają być trwałe:

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. Przepływ: wycentrowanie powinno być niezależne od kierunku dokumentu i trybu pisania

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ły kolor tła, dzięki czemu można sprawdzić, jaki wpływ ma technika centrowania na rozmiary pól podrzędnych (jeśli występuje).

5 uczestników

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

1. Centrum treści

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środkowywania grup elementów przeznaczonych do czytania.

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

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

2. Gentle Flex

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

Delikatne dostosowanie to strategia polegająca na prawdziwym wyśrodkowywaniu tylko. Jest on miękki i delikatny, ponieważ w przeciwieństwie do place-content: center rozmiar pola dziecięcego nie jest zmieniany podczas wycentrowania. 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;
}

Świetnie sprawdza się w przypadku układów makro i mikro.

3. Autobot

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

Kontener jest ustawiony na elastyczne bez stylów wyrównania, a bezpośrednie elementy podrzędne mają styl z automatycznymi marginesami. margin: auto ma w sobie coś nostalgicznego i cudownego, które ma w sobie funkcje z każdej strony.

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

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. Flow: super! (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;
}

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. Tekst: prawidłowy.

Element „wysuwa się”, ponieważ pozycjonowanie bezwzględne wyrzuca go poza normalny przepływ. Fragmenty nazw pochodzą z czasów, w których jest mi najbardziej przydatne, czyli do nanoszenia ich 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.

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 wyspie i mógłbym mieć tylko jedną technikę centrowania, 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 przydatny w przypadku zarówno makr, jak i mikroukładów. To uniwersalne i wiarygodne 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 dzwonka odporności? Chodziło mi o tłumaczenie i przełącznik automatycznej wysokości w kontenerze. Co jeszcze?

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

Remiksy społeczności

• CSS Tricks z postem na blogu