Alex hilft bei allen Fragen zu CSS vertical-align.

„CSS vertical-align ist eines meiner Lieblingsthemen.“

Es ist Punkt 9 Uhr morgens. Ein regnerischer Montag hatte das Wochenende weggespült. Ich spürte die Last einer bevorstehenden grauen Arbeitswoche auf mir, als ich meine Notizen für einen komplizierten Fall von CSS-Variablen durchging. Plötzlich stürmte ein unrasierter, korpulenter Mann mit Preisboxernase ins Büro. Er war sichtlich in Rage. Und er war mein Kollege. Er sah aus, als hätte er seit der Ankündigung von CSS3 nicht mehr geschlafen. Vielleicht lag es an seinem blassen Gesicht – klar war: etwas stimmte nicht.

„Warum so eilig, Kollege?“

Er ließ seinen Laptop auf meinen Schreibtisch fallen, um mir einen Bildschirm voller pulsierender Frösche und leerer Seerosenblätter zu zeigen.

„Hier ist was für dich. Ich kann meinen Content nicht zentrieren. Ich habe die ganze Nacht nicht geschlafen. Und weißt du was? Jeder wird dieses Problem haben. Stell dir all die Klagen vor.”

Der Mann hatte keinen Schimmer, worauf er sich eingelassen hatte. Die vertikale Zentrierung von Content ist ein riesiges Durcheinander mit vielen Fallstricken, die bis zu IE6 reichen. Aber er tat mir leid. Und ich habe eine Schwäche für rührselige Geschichten.

„Beruhige dich, Ricardo. Alex Santos, Esquire, Master of CSS, ist an deiner Seite.“

. . .

Es hat sich vielleicht nicht alles genau so zugetragen. Möglicherweise habe ich die Geschichte ein kleines bisschen ausgeschmückt.

Fest steht aber: Mein Kollege Ricardo ist ein bekennender CSS-Dummy. Einmal erzählte er mir, dass er in seinem Markup noch immer <center> verwendet. Was die vertikale Ausrichtung in CSS angeht, ist er völlig ahnungslos.

Zugegeben: Content in CSS korrekt auszurichten, ist keine einfache Sache. Ich habe so einige Leute gesehen, die damit zu kämpfen haben, und finde immer wieder „kritische“ Fehler, wenn es um echtes Responsive Design geht.

Aber keine Sorge: Wenn Sie wie mein Kollege mit CSS vertical-align zu kämpfen haben, sind Sie hier genau richtig.

Zur CSS-Eigenschaft „vertical-align“

Als ich angefangen habe, in der Frontend-Entwicklung zu arbeiten, war ich mit dieser Eigenschaft etwas überfordert. Ich nahm an, dass sie wie die klassische „text-align“-Eigenschaft zu verwenden war. Wenn es nur so einfach wäre...

Die CSS-Eigenschaft vertical-align funktioniert problemlos mit Tabellen, aber nicht mit divs oder anderen Elementen. Wenn Sie sie in einem div verwenden, richtet sie das Element neben den anderen divs und nicht – wie wir es meist wollen – am Content aus. Dies funktioniert nur mit display: inline-block;.

Hier ist ein Beispiel:

See the Pen 1#Example_OutSystems Experts - Vertical-align on divs von Alexandre Santos (@alexandre_santos) auf CodePen.

 

Wir möchten den Content zentrieren, nicht die div selbst!

Es gibt zwei Ansätze. Wenn Sie nur einige div-Elemente mit Text – wie etwa eine Navigationsleiste – haben, können Sie die Eigenschaft line-height verwenden. Das bedeutet, dass Sie die Höhe des Elements kennen müssen, die Höhe aber nicht festlegen müssen. Auf diese Weise wird Ihr Text immer zentriert.

Dieser Ansatz hat jedoch einen Haken. Wenn Ihr Text mehr als eine Zeile enthält, wird die Zeilenhöhe mit der Anzahl der vorhandenen Zeilen multipliziert. Dies führt zu unschönen Ergebnissen, die niemand möchte.

Schauen Sie sich dieses Beispiel an:

See the Pen 2#Example_OutSystems Experts - Navbar with line-height von Alexandre Santos (@alexandre_santos) auf CodePen.

 

Wenn der Content, den Sie zentrieren möchten, mehr als eine Zeile hat, ist es am besten, div-Tabellen zu verwenden. Sie könnten auch echte Tabellen verwenden, aber das wäre semantisch nicht korrekt. Wenn Sie Umbrüche für responsive Zwecke benötigen, sind Sie mit dev-Elementen besser versorgt.

Damit dies funktioniert, brauchen Sie einen übergeordneten Container mit der Eigenschaft display: table;. Innerhalb dieses Containers haben Sie die Anzahl der Spalten, die Sie zentriert haben möchten, mit der Eigenschaft display: table-cell; (und vertical-align: middle;).

Schauen wir uns ein Beispiel an:

See the Pen 3#Example_OutSystems Experts - Table cell vertical-align von Alexandre Santos (@alexandre_santos) auf CodePen.

 

Warum funktioniert dies mit dem Tabellenlayout, aber nicht mit div-Elementen? Aus folgendem Grund: Wenn Sie eine Tabelle haben, haben die Zeilen die gleiche Höhe. Wenn also der Content in der Zelle nicht die gesamte verfügbare Höhe einnimmt, fügt der Browser automatisch einen vertikalen Abstand hinzu, um Ihren Content zu zentrieren.

Die Position-Eigenschaft

Beginnen wir mit den Grundlagen:

  • position: static;– dies ist der Standardwert. Das Element wird nach der Reihenfolge des HTML-Codes dargestellt.
  • position: absolut; — wird verwendet, um die exakte Position zu definieren, an der sich das Element befinden muss. Diese Position bezieht sich immer auf den nächsten Vorgänger in einer relativen Position (nicht statisch). Wissen Sie, was passiert, wenn Sie die genaue Position des Elements nicht definieren? Sie verlieren die Kontrolle darüber. Sie wird zufällig gerendert, wobei der Dokumentenfluss vollständig außer Acht bleibt. Standardmäßig wird es links oben in der Ecke angezeigt.
  • position: relative; – wird verwendet, um das Element relativ zur normalen Position (statisch) zu positionieren. Diese Position behält die Ablaufreihenfolge des Dokuments bei.
  • position: fixed; – wird verwendet, um das Element relativ zum Browserfenster zu positionieren, sodass es immer im Viewport sichtbar ist.

Hinweis: Einige Eigenschaften wie top und z-index funktionieren nur, wenn das Element eine Position hat (nicht statisch).

Machen wir uns an die Arbeit!

Möchten Sie ein Feld an der Mitte Ihrer Seite ausrichten?

Nehmen Sie zuerst ein Element mit einer relativen Position und den gewünschten Dimensionen. Zum Beispiel: 100% Breite und Höhe.

Der zweite Schritt kann je nach Zielbrowser unterschiedlich sein. Sie können eine von zwei Optionen verwenden:

  • Traditionelle Option: Sie müssen die genaue Größe Ihres Feldes kennen, um die Hälfte der Breite und die Hälfte der Höhe des Feldes zu entfernen. Etwa so:

See the Pen 4#Example_OutSystems Experts - Position absolute with sized box von Alexandre Santos (@alexandre_santos) auf CodePen.

 

  • Coole neue CSS3-Option: Sie fügen eine transform-Eigenschaft mit einem translate-Wert von -50% hinzu. Dadurch wird Ihr Feld immer zentriert sein. Etwa so:

See the Pen 5#Example_OutSystems Experts - Position absolute without sized box von Alexandre Santos (@alexandre_santos) auf CodePen.

 

Wenn Sie Content zentrieren möchten, verwenden Sie niemals (wirklich: nie!) top: 40% oder left: 300px. Das mag perfekt auf Ihren Testbildschirmen funktionieren, zentriert Content aber nicht. Jedenfalls nicht wirklich.

Erinnern Sie sich an die feste Position? Sie können das Gleiche wie bei der absoluten Position tun, aber Sie brauchen die relative Position im übergeordneten Element nicht. Sie ist immer relativ zum Browserfenster.

Haben Sie schon von Flexbox gehört?

Sie können das Flexbox-Layout verwenden – eine Option, über die mein Freund Dinis Carvalho vor einiger Zeit geschrieben hat. Und ja: Sie ist weit besser als alle anderen verfügbaren Optionen. Mit der Flexbox ist es ein Kinderspiel, Elemente auf unterschiedliche Weise zu manipulieren. Selbst Ricardo könnte dies schaffen.

Das Problem ist, dass Sie sich von einigen Browsern wie IE9 und früheren Versionen lösen müssen. Let it go. Let it go... can’t hold it back anymore. (Ohrwurm? Gern geschehen.)

Hier ist ein Beispiel, wie Sie ein Feld vertikal zentrieren:

See the Pen 6#Example_OutSystems Experts - Flexbox layout without sized box von Alexandre Santos (@alexandre_santos) auf CodePen.

 

Mit dem Flexbox-Layout können Sie mehr als ein zentriertes Feld haben und es korrekt ausrichten. Aber das ist eine Geschichte für ein anderes Mal!

Und was ist mit CSS Grid?

CSS Grid Layout ist das leistungsstärkste Layoutsystem, das in CSS verfügbar ist. Der Hauptunterschied zu Flexbox ist die Tatsache, dass es in einem zweidimensionalen System arbeitet. Das bedeutet, dass es sowohl Spalten als auch Zeilen verarbeiten kann – im Gegensatz zu Flexbox, das größtenteils ein eindimensionales System ist. Aus diesem Grund könnte dies für die Erstellung komplexerer Layouts geeignet sein, wie etwa das Gallery-Pattern auf der OutSystems-Benutzeroberfläche.

Abgesehen davon kann es perfekt verwendet werden, um Elemente in einem Container zu zentrieren. Hier ist ein Beispiel, wie Sie ein Feld vertikal zentrieren:

See the Pen CodePen Home 7#Example_OutSystems Experts - Grid layout without sized box von Bernardo Cardoso (@BenCardoso) auf CodePen.

 

Ähnlich wie bei Flexbox müssen Sie sich auch bei diesem Ansatz von älteren Browsern verabschieden, auch wenn die Unterstützung für die wichtigsten davon absolut stabil ist.

Mehr über CSS Grid erfahren Sie in diesem umfassenden Guide und diesen praktischen Beispielen.

Keine Tränen mehr wegen CSS Vertical Align

Die vertikale Ausrichtung kann so sein wie Johnsons Baby Shampoo: absolut tränenfrei. Wenn Sie dem folgen, was Sie in unseren Beispielen gelernt haben, können Sie die vertikale Ausrichtung in kurzer Zeit meistern.

. . .

Etwas später ging ich an Ricardos Arbeitsplatz vorbei, aber er war nicht da. Jemand sagte mir, dass er auf einem der vielen bequemen Sofas unserer Firma eingeschlafen sei.

Es war wohl ein TKO.

Als ich allerdings auf den Bildschirm seines Laptops schaute...

 

Was hatte er getan? Spiele gespielt, während der Arbeitszeit?

Ziemlich viele Farben für einen Montag, der so grau begonnen hatte.

Referenzen und weitere Lektüre