Zentrieren

Zurück zum Hero. Sein Inhalt steht links, aber eine Begrüßung wie diese sitzt meist in der Mitte des Bereichs, waagerecht und senkrecht.

Im CSS-Kurs hast du Dinge mit display: flex, justify-content: center und align-items: center in beide Richtungen zentriert. In Tailwind sind das die Klassen flex justify-center items-center. Unser Hero ist eine Spalte, die Achsen sind also gedreht: items-center zentriert seine Items waagerecht und justify-center senkrecht.

Senkrechtes Zentrieren ergibt nur Sinn, wenn der Container höher ist als sein Inhalt. Die Klasse min-h-96 (min-height: 24rem, 384 px) gibt dem Hero eine Mindesthöhe: Er ist mindestens so hoch und höher, wenn sein Inhalt mehr Platz braucht. (min-h-screen kennst du; min-h-* nimmt auch die Zahlen der Abstandsskala.)

Auch ein Grid kann zentrieren. Die Klasse place-items-center (place-items: center) zentriert jedes Grid-Element in seiner Zelle, in beide Richtungen. Für ein einzelnes Kind ist das der kürzeste Weg, es zu zentrieren:

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

Unser Hero hat aber drei Kinder, und ein Grid würde jedes von ihnen in eine eigene Zeile setzen und die Zeilen über die ganze Höhe verteilen. Für mehrere Items ist Flexbox das richtige Werkzeug.

Noch etwas: Wenn du items-start in items-center änderst, ersetze die Klasse wirklich. Bleiben beide stehen, gewinnt items-start, obwohl items-center danach steht. Erinnere dich an die Lektion über Farben und Text: Wenn zwei Klassen dieselbe Eigenschaft setzen, spielt ihre Reihenfolge im Attribut class keine Rolle, sondern nur die Reihenfolge ihrer Regeln im Stylesheet, das Tailwind erzeugt.