Obsługa wyrównywania treści w układach bloków i tabel.

Rachel Andrew

Od Chrome 123 możesz używać właściwości align-content z CSS Box Alignment w przypadku układów blokowych i tabel. Umożliwi to wyrównanie kierunku bloku bez konieczności tworzenia układu elastycznego lub siatki. Jeśli jednak używasz jednostki align-content poza tymi metodami układu, może być konieczne zaktualizowanie arkusza CSS, ponieważ zacznie ona działać.

Browser Support

  • Chrome: 123.
  • Edge: 123.
  • Firefox: 125.
  • Safari: 17.4.

align-content w układach elastycznym i siatki

Prawdopodobnie używasz jednostki align-content do wyrównywania elementów flex lub ścieżek siatki. W układzie flex właściwość align-content jest używana w kontenerze flex do wyrównywania elementów flex względem osi poprzecznej. W poniższym przykładzie ma wartość space-between, więc rozdziela dostępną przestrzeń w kontenerze elastycznym między wiersze elastyczne.

Właściwość align-content rozmieszcza wiersze elementów flex, ponieważ kontener flex ma wolną przestrzeń na osi poprzecznej.

Wyśrodkowywanie elementu w pionie

Właściwość align-content jest szczególnie przydatna do wyśrodkowywania elementu w pionie w kontenerze. Aby to osiągnąć, użyj atrybutu display: flex razem z atrybutem align-content: center. Sprawia to, że element staje się elementem flex, a inne domyślne zachowania elementu flex również zaczynają obowiązywać. W tym przykładzie nagłówek jest wyśrodkowany w pionie za pomocą elementu align-content: center, co powoduje zmniejszenie elementu, aby dopasować go do treści. Dlatego musisz zastosować element flex-grow: 1.

Właściwość align-content wyrównuje nagłówek w pionie w kontenerze flex.

Dzięki właściwości align-content dostępnej w przypadku układu blokowego możesz uzyskać wyrównanie pionowe bez konieczności tworzenia układu elastycznego, aby właściwość działała. Nie są potrzebne żadne dodatkowe właściwości, ponieważ element pozostaje elementem blokowym. Jedyną zmianą jest wyrównanie.

Właściwość align-content wyśrodkowuje nagłówek w pionie w kontenerze blokowym (wymaga Chrome w wersji 123 lub nowszej albo Safari w wersji 17.4 lub nowszej).

Sprawdź obsługę align-content w układach blokowych

Niestety nie można sprawdzić, czy align-content jest obsługiwany w bloku układu. Ponieważ jednostka align-content jest od dawna obsługiwana w przypadku układów elastycznych i siatkowych, używanie zapytań o funkcje z jednostką @supports zawsze zwraca wartość „true”. Jest to ta sama sytuacja, która miała miejsce w przypadku właściwości gap w flexboxie. Grupa robocza CSS pracuje nad rozwiązaniem dla częściowych implementacji, takich jak ta.

Sprawdzanie witryn pod kątem nieoczekiwanego wyrównania

Właściwość align-content jest zdefiniowana od wielu lat w specyfikacji jako działająca w przypadku układów blokowych. Żadna przeglądarka nie obsługiwała align-content poza tymi kontekstami, więc nie robiła nic. Jeśli jednak dodasz tę właściwość do elementu, który nie jest kontenerem flex ani grid, zacznie ona działać od Chrome 123. Wyszukaj w kodzie CSS użycie align-content i skorzystaj z wersji beta, aby przetestować witryny i aplikacje, jeśli może to dotyczyć Twojej sytuacji.