2012-09-12 11 views
5

Bevor jemand runterstimmt, fragt er mich nach einem weiteren Zentrierungsproblem. Bitte lies meine Situation bevor du urteilst!Zentrieren eines Fluid-DIV mit maximaler Breite und absoluter Positionierung

Ich bin vertraut mit den meisten gängigen Techniken zum Zentrieren von Sachen, aber hier ist meine Situation. Ich habe ein DIV, das sowohl vertikal als auch horizontal zentriert sein muss, aber es muss auch flüssig sein und die Breite von 890px nicht überschreiten.

Die maximale Breite erreicht die Flüssigkeit, die ich möchte, aber weil absolut positionierte Elemente eher Breite als maximale Breite benötigen, bricht meine vertikale/horizontale Zentrierung. Im Moment muss ich Flüssigkeit über Zentrierung opfern (oder umgekehrt) aber ich NEED beide.

Ich mag würde, ist meine aktuellen Code zu jeder Zeit den Inhalt in meinem zentrierten DIV im Blick behalten dies nicht tun, ist es, den Inhalt versteckt sich, als das Fenster kleiner http://jsfiddle.net/cCQ2w/

gemacht

Kann jemand vorschlagen, eine Lösung, die für mich arbeiten könnte?

Antwort

2

Ich habe versucht, Ihr Problem zu lösen. Siehe diese Seite: http://jsfiddle.net/PGce2/. Also ist es horizontal und vertikal zentriert und es ist "flüssig" und überschreitet nicht die Breite von 890px.

+0

Danke für diesen anderen Ansatz, aber es übersteigt 890px, versuchen Sie, mehr Absatztext hinzuzufügen und das Browserfenster größer zu machen. Irgendwelche anderen Ideen? – egr103

+0

@ egr103, ich habe gerade vergessen zu entfernen "width: 100%;" von .break css. Ich habe es hier korrigiert: [http://jsfiddle.net/afNyC/](http://jsfiddle.net/afNyC/). Ich habe es in Firefox, Chrome und IE getestet 9 – khomyakoshka

+0

Brilliant! Vielen Dank! Im Grunde hatte mein Originalcode ein div hinter dem Hauptbit des Inhalts, so dass ein BG-Bild die volle Breite des Browserfensters ausfüllen konnte. Würden Sie vorschlagen, einen weiteren Wrapper um .break hinzuzufügen, um diesen Effekt zu erzielen? – egr103

2

Sie können eine Breite von 100% mit einer maximalen Breite von 890px angeben.

Ich habe [hier] [1] das Beispiel eines div mit sowohl horizontal als auch vertikal auszurichten Mitte gezeigt.

[1]: http://jsfiddle.net/r2qL5sgj/1/ 
+0

Verwendung der Breite: 100% arbeitete in Verbindung mit Speichern der berechneten Breite und dann später setzen der Breite auf initial um die Durchflussberechnung zu umgehen. –