Übung 2: Einen Block horizontal zentrieren

Hinweise

Lösung

.box { margin-left: auto; margin-right: auto; }

Warum text-align hier nichts tut

text-align richtet den Inhalt einer Box aus, nicht die Box selbst. Die Eigenschaft wirkt auf die Zeilenboxen innerhalb eines Block-Containers und verschiebt darin Text, Bilder und alles andere, was inline ist. Eine Block-Box unter ihren Geschwistern bewegt sie nicht.

Am Container gesetzt zentriert sie also die Schrift in der inneren Box, was in dieser Aufgabe sichtbar wird: Das Wort rückt in die Mitte, der Kasten bleibt links. Das ist kein Fehler der Eigenschaft, sondern ihre Definition – und ein gutes Beispiel dafür, warum die Spalte „Anwendbar auf“ in der Schnellreferenz mehr Aufmerksamkeit verdient, als sie üblicherweise bekommt.

Der Irrtum ist alt und hat einen historischen Grund: Der Browser Internet Explorer der Version 5 zentrierte mit text-align: center tatsächlich auch Blöcke. Stylesheets aus jener Zeit setzten deshalb beides – die Zentrierung am Container für den einen Browser und die automatischen Außenabstände für alle anderen.

Was auto verteilt

Der Schlüssel liegt im Schlüsselwort auto. Bei einem Block im normalen Fluss muss die Rechnung aus linkem Außenabstand, Rahmen, Innenabstand, Breite und den entsprechenden Werten rechts genau die Breite des enthaltenden Blocks ergeben. Ist die Breite festgelegt und stehen beide seitlichen Abstände auf auto, verteilt der Browser den Rest gleichmäßig auf beide Seiten.

Steht nur einer auf auto, bekommt dieser den gesamten Rest – die Box rückt an die gegenüberliegende Kante. Und ist keine Breite angegeben, bleibt nichts zu verteilen: Der Block ist so breit wie der verfügbare Platz, und auto wird zu null. Deshalb ist die Breitenangabe in dieser Aufgabe kein Beiwerk, sondern Voraussetzung.

Senkrecht funktioniert dasselbe nicht. Im normalen Fluss verhält sich ein oberer oder unterer Abstand von auto wie null, und eine Box lässt sich damit nicht in der Höhe zentrieren. Das war einer der langlebigsten Stolpersteine von CSS 2.1.

Die heutigen Wege

In einem Flex- oder Grid-Container verteilt auto den Platz auf beiden Achsen, und dort zentriert margin: auto tatsächlich in beide Richtungen. Ebenso genügt am Container justify-content: center beziehungsweise place-items: center – und dann sogar ohne feste Breite am Kind.

Für den einfachen Fall eines mittigen Textblocks hat sich außerdem eine kompakte Schreibweise durchgesetzt: eine Höchstbreite statt einer festen Breite, dazu die automatischen Abstände. Die Box ist dann auf breiten Bildschirmen zentriert und auf schmalen so breit wie der Platz – ohne eine einzige Bedingung.

Der klassische Weg bleibt trotzdem richtig und ist der kürzeste, wenn ohnehin eine Breite feststeht. Der Prüfer misst nur die Lage der Box im Container; welcher der Wege dorthin führt, spielt keine Rolle.

Zentrieren in der Höhe

Waagerecht ist der Fall mit zwei automatischen Abständen gelöst; senkrecht bietet CSS 2.1 nichts Vergleichbares. Ein oberer Abstand von auto verhält sich im normalen Fluss wie null, weil in der Höhe kein Rest zu verteilen ist – der Container ist so hoch wie sein Inhalt, und Inhalt und Container wachsen gemeinsam.

Die klassischen Umwege setzten deshalb an anderer Stelle an: eine Tabellenzelle mit senkrechter Ausrichtung, ein Element mit fester Höhe und einer Zeilenhöhe desselben Werts, oder eine absolute Positionierung mit halber Höhe als negativem Abstand. Alle drei setzen voraus, dass man die Höhe kennt, und genau das ist bei Text selten der Fall.

Heute genügt am Container eine Angabe zur Ausrichtung auf beiden Achsen, und die Höhe darf unbekannt bleiben. Auch margin: auto zentriert dort in beide Richtungen, weil in einem Flex- oder Grid-Container auf beiden Achsen ein Rest zu verteilen ist. Wer den Unterschied einmal gesehen hat, versteht, warum diese Module entstanden sind: Nicht die Zentrierung war neu, sondern die Möglichkeit, sie ohne bekannte Maße zu formulieren.

Für diese Aufgabe bleibt es beim klassischen Weg, und er ist es wert, im Gedächtnis zu bleiben: Er kommt ohne jedes Layout-Modul aus, funktioniert seit CSS 1 und ist in einer einzigen Zeile notiert. Wer ihn kennt, zentriert einen Textblock auf einer beliebigen Seite ohne Rückfragen – und versteht zugleich, was das Schlüsselwort für die automatische Verteilung überhaupt tut, das in Flexbox und Grid dieselbe Rolle auf beiden Achsen übernimmt.

Fragen zur Übung