Vycentrování

Vraťme se k úvodní sekci. Její obsah je vlevo, ale takové uvítání obvykle bývá uprostřed plochy, vodorovně i svisle.

V kurzu CSS jste prvky centrovali v obou směrech pomocí display: flex, justify-content: center a align-items: center. V Tailwindu to jsou třídy flex justify-center items-center. Naše úvodní sekce je sloupec, takže osy jsou otočené: items-center vycentruje její položky vodorovně a justify-center svisle.

Svislé centrování má smysl, jen když je kontejner vyšší než jeho obsah. Třída min-h-96 (min-height: 24rem, 384 px) dá úvodní sekci minimální výšku: bude alespoň takhle vysoká, a když její obsah bude potřebovat víc místa, bude vyšší. (Třídu min-h-screen znáte; min-h-* přijímá i čísla ze škály mezer.)

Centrovat umí i mřížka. Třída place-items-center (place-items: center) vycentruje každou položku mřížky v její buňce, v obou směrech. Jediné dítě tak vycentrujete nejkratším zápisem:

<div class="grid place-items-center size-24 rounded-full bg-orange-100">🐾</div>

Naše úvodní sekce má ale tři děti a mřížka by každé z nich dala vlastní řádek a řádky by rozložila po celé výšce. Pro víc položek je správným nástrojem flexbox.

Ještě jedna věc: když měníte items-start na items-center, starou třídu opravdu nahraďte. Kdyby zůstaly obě, vyhraje items-start, i když je items-center napsaná za ní. Vzpomeňte si na lekci Barvy a text: když dvě třídy nastavují stejnou vlastnost, nerozhoduje jejich pořadí v atributu class, ale jen pořadí pravidel v souboru se styly, který Tailwind vytvoří.