[bongartz]

Hallo zusammen,

ich stehe gerade vor einem etwas komisches Problem. Ich will mittels transform: translateY(-50%); einen Div zentrieren, so das die Inhalte in diesem auch zensiert sind. Jetzt habe ich aber das Problem das die Breite des Div irgendwie immer nur auf 50% kommt und die Inhalte in den anderen Div's somit falsch dargestellt werden.

Anbei ein Link zu meinen Problem: Link zum Beispiel

Einfach ganz nach unten scrollen, hier soll der Bereich im Footer schön zensiert werden, aber die Inhalte am Logo anliegen. Leider wird die Nav umgebrochen, was ich nicht will.

Danke

[FloKu]

ein div zentrieren klappt sehr viel besser mit:

position: relative;
margin: 0 auto;

so kannst du die breite frei wählen und musst keine komischen Berechnungen anstellen, um wie viel du das div wieder nach links ziehen musst, damit es irgendwann in der Mitte landet.

steige aber auch nicht ganz durch deinen code durch. Sieht aus, als wenn du es dir sehr viel komplizierter machst, al es sein müsste.

Probier einfach mal den inhalt deines "footer #insideFooter" gegen den code von mir oben auzustauschen. Vergiss aber nicht eine breite anzugeben, z.b. 80% oder so.

[bongartz]

Hallo und danke für deine Antwort.

Ich glaube aber das deine Lösung nur geht, wenn ich weiß wie breit das Element ist, da sonst diese wieder um das Delta außermittig ist.

Irgendwie ist das viel komplizierter als gedacht.

Ich habe auf der Seite noch was weiter gemacht, mit deiner Lösung so das man das Problem sehr gut sehen kann was ich habe.

[hadouken]

[bongartz]

Es soll sich der Breite anpassen und dafür sorgen das die Sachen in ihm schön zensiert sind.

Also gibt es hier keinen fixen wert dafür.

[hadouken]

[bongartz]

Perfekt.

Vielen Dank.

Ich habe so viel versucht und es war doch so einfach

[HerrSeeliger]

Hallo bongartz,

transform: translateY(-50%) verschiebt das Element aus der Y-Achse um 50% der Höhe des Elementes. Das ist noch kein zentrieren. Allerdings ist bei position: absolute oder fixed Elementen eine Kombination aus Left: 50% und transform: translateX(-50%) sehr praktisch. Diese werden dann auf der X-Achse zentriert.

#footer hat zwei überflüssige Angaben:
/* width: 100%; */
/* z-index: 100; */

Als positions: static Element kann er den z-index nicht verarbeiten.
Er hat automatisch 100%.


div.footer hat zwei überflüssige Eigenschaften
width: 100%;
margin: 0 auto;

100% width hat er automatisch und kann auch somit mit Martin: 0 auto keine Abstand nach Aussen haben.
Grundsätzlich würde ihn aber Martin: 0 auto zentrieren, wenn bei width ein Wert kleiner als 100% angegeben ist.

Das Element was den Inhalt zentriert ist dann text-align: center.

Da der #insiderFooter display: inline-block hat kann er mit text-align zentriert werden.



Hast du schon mal mit Flexbox in dem Zusammenhang experimentiert?