margin:auto

[WAY_KOW]

Hallo
Ich möchte meine gesamte Seite im Browser zentrieren

<div style="magin:auto;">...</div>

Da div aber ein Blockelement ist, nimmt es standardmäßig die gesamte Breite des Bildschirms ein, und somit ist der rechte und linke Rand immer = 0;

Lege ich die Breite fest mit width:.... dann funktioniert es perfekt.

Leider kenne ich die Breite des Contents nicht, da sich dieser aus pixelbreite und em Breite zusammensetzt.

Hab schon versucht mittels display:inline das div zum inline Objekt zu machen ohne Erfolg.

Wie zentriere ich, wenn ich die Breite des Contents nicht kenne?

 

[prm]

Die horizontale Zentrierung bedarf einer Breitenangabe.
Verwende deshalb einheitliche Einheiten, dann kannst du auch die Breite berechnen.

Für eine vertrikale Zentrierung benötigst du zusätzlich eine Höhenangabe.

Horizontale und vertikale Zentrierung mit CSS

 

[Elroy]

Leider kenne ich die Breite des Contents nicht, da sich dieser aus pixelbreite und em Breite zusammensetzt.

???? Hast du da mal ein Beispiel.

Du musst dich bei einer Zentrierung für eine feste Breite entscheiden, ansonsten macht eine Zentrierung wenig Sinn.

Gruss
Elroy

 

[WAY_KOW]

genau das habe ich befürchtet:(

Das Menü hat eine em Breite damit es sich an die Schriftgröße anpasst.
Der Content nach Pixeln.
Würde ich den Content auch em Breit machen würde mit schon bei der ersten Schriftvergrößerung das Design aus dem "Leim" gehen.

 

[Elroy]

Hallo.

Das hat doch nichts mit deinem Problem zu tun.

Deswegen kannst du der Seite doch trotzdem eine Gesamtbreite geben, z.B.

body {width: 800px;}

Wie du dir dann die 800px einteilst bleibt dir überlassen.
Zum Beispiel Menü links mit 14em Breite und der Rest für den Content.
In diesem Fall brauchst du dem Content gar keine Breite zu geben.

Gruss
Elroy

 

[WAY_KOW]

Ist etwas komplizierter:)

Die Breite des Contents wird duch ein Pixelgenaues Banner definiert. Somit ist der Content immer z.B. 600 px breit.
+ Breite des Menüs in em.

Ich löse das eben per Javascript.