Elemente horizontal und vertikal ausrichten

Bevor wir anfangen, ein kleiner Reminder:

horizontal vertikal

Verwende keine Abstände für das horizontale Ausrichten

Die verschiedenen Endgeräte, wie z.B. Tablets und Smartphones, haben verschiedene Bildschirmgrößen und dementsprechend verschiedene Breiten und Höhen.

Versuchst du z.B. ein Bild zu zentrieren, indem du den Außenabstand links auf 300px setzt, mag das auf Desktop vielleicht gut aussehen. Aber auf dem Tablet wäre das Element eher rechts ausgerichtet. Und beim Smartphone könnte es im Hochformat sogar gar nicht mehr sichtbar sein. Die Bildschirme sind einfach nicht breit genug:

nichtabstandgif

Du könntest hier zwar die Abstände für alle Geräte einzeln anpassen, aber hier verlierst du schnell den Überblick und weißt später nicht mehr, warum ein Element so positioniert wird. Außerdem ist das einfach unsauber. Und unsauber gibt’s bei uns nicht! 😉

Elemente horizontal mit der Schrift-Ausrichtung ausrichten

Wenn du ein Element ausrichten möchtest, solltest du das über die Ausrichtung der Schrift tun.

Aber dabei solltest du z.B. nicht das Bild-Element auswählen, sondern das Element, in dem sich das Bild-Element befindet (meistens ist das eine Sektion, ein Container oder ein Bereich):

bildzentrierengif

Das klingt zwar komisch, ist technisch aber der sauberste Weg.

Dabei solltest du beachten, dass der gesamte Inhalt ausgerichtet wird. Also alle Elemente, die z.B. in dem Bereich drin sind.

Möchtest du Elemente innerhalb eines Bereiches untereinander unterschiedlich ausrichten, kannst du das jeweilige Element in einen eigenen Bereich ziehen und hier die Text-Ausrichtung ändern:

eigenerbereichgif    

Ausnahme: Bereiche horizontal ausrichten

Wenn du einen Bereich ausrichten möchtest, wähle den Bereich aus, navigiere unter „Abstände“ und aktiviere „Zentrieren“:

bereichzentrierengif

Elemente vertikal ausrichten

Wenn du ein Element vertikal mittig ausrichten möchtest, machst du das über Innen- oder Außenabstand oben und unten

Entweder machst du das über den Innenabstand des übergeordneten Elements. Dann solltest du darauf achten, dass das Element keinen Außenabstand hat:

vertikalmittiggif

Oder du machst das mit dem Außenabstand des Elements und achtest darauf, dass kein Innenabstand eingestellt ist. Kommt am Ende das Gleiche bei raus.

Wenn du hier mehrere Elemente hast, sorge dafür, dass sie als „Inline Block“ dargestellt werden. Du kannst den Abständen auch Minuswerte geben. Hier musst du einfach ein bisschen herumspielen, bis es vertikal zentriert aussieht:

mehrereelementevertikalgif

© 2012-2019 by Chimpify UG (haftungsbeschränkt)