Wie werden absolut positionierte Elemente in Webflow, geräteübergreifend richtig zentriert? Als ich mit Webflow gestartet habe, habe ich das absolut positionierte Element mit den Reglern versucht optisch, mittig zu positionieren.
Auf dem Desktop, hat diese Methode funktioniert. Anders sah das allerdings im responsive Modus aus. Das absolut positionierte Element hat sich jedes mal verschoben und musste händisch für jedes Device angepasst werden. So war das Element nie zu 100% mittig. Ein weiteres Problem entstand, wenn ich die Größe des Elements verändern wollte. Dadurch verschob sich die Position des Webflow Icons erneut.
Eine einfache Lösung hat da Abhilfe geschaffen. Gehe zum Positionsregler und gib links und oben 50% ein. Mit dieser Einstellung wird sich die obere linke Ecke deines Elements exakt an der Mitte deines relativ positionierten Elements ausrichten. (Diese Angaben sind relativ zum Element box-tutorial)
Das ist noch nicht genau das was wir möchten, es fehlt noch ein letzter Schritt um das gewünschte Ergebnis zu erreichen. Um das Element nun perfekt mittig zu platzieren, musst du eine 2D & 3D Transformation hinzufügen.
Danach ist das Element perfekt mittig ausgerichtet und das für jeden Breakpoint deines Designs. (Diese Angaben sind relativ zum Element selber)
Webflow kannst du hier kostenlos ausprobieren:
https://webflow.grsm.io/77zg9e1s3png *
*Affiliate Link
.jpg)
