Środkowanie w CSS

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

Adam Argyle

Ukierunkowanie na CSS to niełatwe zadanie, pełne żartów i żartów. 2020 r. Usługi porównywania cen są już dorosłe i teraz możemy szczerze śmiać się z tych dowcipów, zaciskać zęby.

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

Wyzwanie

Dostępne są różne rodzaje centrowania. Różne przypadki użycia, liczba czynników do wyśrodkowania itd. Aby przedstawić uzasadnienie „zwycięstwa”, technikę centrowania. stworzył The Resilience Ringer. To seria testów wytrzymałościowych dla każdego ukierunkowania aby znaleźć równowagę między poszczególnymi elementami i obserwować ich 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.

Dzwonek odporności

Dzwonek odporności to odzwierciedlenie moich przekonań, że powinna być odporna na międzynarodowe układy, rozmiary widocznych obszarów, zmiany tekstu treści. Te założenia pomogły opracować następujące testy odporności które przetrwają.

  1. Ścisłe: wyśrodkowanie powinno być w stanie obsłużyć zmiany szerokości
  2. Ściśnięte: wyśrodkowanie powinno być w stanie obsłużyć zmiany wysokości
  3. Duplikat: wyśrodkowanie powinno być dynamiczne w stosunku do liczby elementów
  4. Edytowanie: środkowanie 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ć swoją odporność, utrzymując zawartość w na środku w trakcie ściśnięcia, ściśnięcia, powielenia, edycji i zamiany na z różnymi trybami językowymi i wskazówkami. godne zaufania i odporne centrum, czyli bezpieczne centrum.

Legenda

Wprowadziliśmy kilka wizualnych wskazówek na temat kolorów, które pomogą Ci zachować metadane w kontekście:

  • Różowe obramowanie wskazuje własność stylów wyśrodkowania
  • Szara ramka to tło kontenera, które ma być wyśrodkowane. elementy
  • Każde dziecko ma białe tło, aby można było zobaczyć efekty technika centrowania obejmuje rozmiary elementów podrzędnych (jeśli występują).

5 uczestników

Do nagrody Resilience Ringer pojawiło się 5 technik centrowania. Tylko jedna z nich Pokrętło odporności 👸.

1. Centrum treści

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

Trudno będzie pokonać zwięzłość tekstu display: grid i place-content. Głównym celem i usprawiedliwianiem wszystkich dzieci to solidna technika środkowania dla grup elementów przeznaczonych do odczytania.

.content-center {
  display: grid;
  place-content: center;
  gap: 1ch;
}
Zalety
  • Treść jest wyśrodkowana nawet pod ograniczoną przestrzenią i przepełnieniem
  • Wszystko w jednym miejscu, edycja i konserwacja
  • Luka gwarantuje równe odstępy między n elementami podrzędnymi
  • Siatka domyślnie tworzy wiersze
Wady
  • Najszerszy element podrzędny (max-content) określa szerokość pozostałych elementów. Będzie to o tym znajdziesz w Gentle Flex.

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

2. Delikatny Flex

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

Delikatna Flex to bardziej realistyczna strategia wyłącznie. Jest miękkie i delikatne, ponieważ w przeciwieństwie do place-content: center rozmiary skrzynek dzieci nie są zmieniane w czasie i wyśrodkowanie. Wszystkie elementy powinny być ułożone obok siebie, wyśrodkowane i rozmieszczone w odstępach.

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}
Zalety
  • Obsługuje tylko wyrównanie, kierunek i rozkład
  • Wszystko w jednym miejscu – edycja i konserwacja
  • Luka gwarantuje równe odstępy między n elementami podrzędnymi
Wady
  • Większość wierszy kodu

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

3. Autobot

  1. Squish: świetnie
  2. Squash: świetnie
  3. Duplikat: dobra
  4. Zmiana: świetna
  5. Płyn: świetna

Kontener jest ustawiony na elastyczne bez stylów wyrównania, a bezpośrednie elementy podrzędne mają styl z automatycznymi marginesami. Jest w tym coś cudownego, nostalgicznego margin: auto o pracy wzdłuż wszystkich stron elementu.

.autobot {
  display: flex;
}
.autobot > * {
  margin: auto;
}
Zalety
  • Zabawna sztuczka
  • Szybko i bezproblemowo
Wady
  • Nietypowe wyniki w przypadku nadmiaru treści
  • Stosowanie rozkładu zamiast luk oznacza, że układy mogą się pojawiać w przypadku elementów podrzędnych. stykające się boki
  • Popychanie nie wydaje się optymalne i może spowodować zmianę do rozmiaru pola dziecka.

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

4. Puszysty środek

  1. Squish: zły
  2. Squash: zły
  3. Duplikat: błędny
  4. Edytowanie: świetnie.
  5. Flow: super! (o ile używasz właściwości logicznych)

„puszysty środek” uczestnika jest zdecydowanie najsmaczniejszą muzyką i jest jedyną czyli technikę centrowania, która jest w całości własnością elementu/elementu podrzędnego. Odkryj w sobie różowy wygląd obramowania!?

.fluffy-center {
  padding: 10ch;
}
Zalety
  • Chroni zawartość
  • Atom
  • Każdy test w tajemnicy zawiera tę strategię środkowania
  • Przestrzeń słów to luka
Wady
  • iluzja, że nie jest przydatna
  • Kontener a elementy nieść ze sobą sprzeczność, ponieważ każdy z nich firma jest bardzo zdecydowana,

Świetne do wyśrodkowania na słowie lub frazie, tagów, pigułek, przycisków, elementów i innych.

5. Pop i Plop

  1. Squish: dobrze
  2. Squash: w porządku
  3. Duplikat: błędny
  4. Zmiana: dobra
  5. Przepływ: dostateczny

To „wyskakuje” ponieważ pozycjonowanie bezwzględne powoduje zmianę elementu przepływu danych. Efekt części nazw pochodzą z czasów, w których są mi najbardziej przydatne: nad innymi rzeczami. To klasyczna, poręczna nakładka wyśrodkowana, którą można dostosować do rozmiaru treści. Czasami wystarczy po prostu nad innymi.

Zalety
  • Przydatne
  • Niezawodność
  • Jest nieoceniona, gdy jest potrzebna
Wady
  • Kod z ujemnymi wartościami procentowymi
  • Wymaga position: relative, aby wymusić blok nadrzędny
  • Wczesne i niezręczne podziały wierszy
  • Każdy blok zawierający może zawierać tylko 1 blok bez dodatkowego wysiłku

Doskonale sprawdza się w przypadku modalności, powiadomień, komunikatów, stosów, efektów głębi i wyskakujących okienka.

Zwycięzca

Gdybym był na wyspie i mógłbym mieć tylko jedną technikę centrowania, to...

[drum roll]

Gentle Flex 🎉

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

Zawsze znajdziesz ją w moich arkuszach stylów, bo jest przydatna zarówno w przypadku makr, mikroukłady. To uniwersalne i niezawodne rozwiązanie, które pasuje do z oczekiwaniami. Poza tym uwielbiam tworzyć własne rozmiary kanałów, więc zwykle przechodzę w dane rozwiązanie. Prawda, dużo pisać, ale korzyści to przynosi przeważa nad dodatkowym kodem.

Najbardziej wartościowy zawodnik

Fluxy Center

.fluffy-center {
  padding: 2ch;
}

Fluffy Center jest tak niewielki, że można go łatwo pominąć jako technikę centrowania, ale też podstawę mojej strategii. Jest tak atomowa, że czasem zapomnienia, że go używam.

Podsumowanie

Jakie elementy zaburzają Twoje strategie ukierunkowania? Jakie inne wyzwania które można dodać do dzwonka odporności? Zastanawiałam się nad tłumaczeniem automatyczna wysokość w kontenerze... co jeszcze?

Skoro już wiesz, jak to robię, jak Ty?! Zadbajmy o różnorodność metod i poznać sposoby budowania w sieci. Wykonaj ćwiczenia z programowania w tym poście, aby: możesz utworzyć własny przykład środkowego, tak jak w tym poście. Tweetnij mnie, a potem dodam ją do Remiksy utworzone przez społeczność poniżej.

Remiksy utworzone przez społeczność