Hey alle, ich habe eine Seite mit etwas Inhalt darin. Ich muss das Ganze zentrieren, damit der Inhalt in großen Auflösungen immer in der Mitte der Seite ist. Zwei Dinge. Erstens, wenn die Auflösung klein ist, möchte ich zumindest den Inhalt anhalten, wenn es oben auf der Seite steht. Ich habe versucht, oben zu tun: 50% Höhe: 680 Margin-Top: -340px. Das Problem ist, dass in einer kleineren Auflösung der Inhalt von der Seite fliegt. Wie mache ich das? Das Nav ist an der Spitze in einem absoluten div, das muss auch vertikal zentriert sein. Danke für Ihre Hilfe alle!
er
Es ist möglich, ein <div> in einem anderen <div> nur mit css vertikal zu zentrieren, ohne explizit eine Höhe oder einen negativen oberen Rand anzugeben.
Der einzige große Nachteil der folgenden Technik ist, dass { display: table; } im Internet Explorer & lt; NICHT unterstützt wird. 9.
Wenn dies Ihr Markup ist:
%Vor% Das CSS, um das innere <div> zentriert zu bekommen, ist:
Dies funktioniert, indem das Verhalten des naitiven Layouts von <table> elements im Wesentlichen emuliert wird.
Sie können CSS3-Medienabfragen verwenden, um unterschiedliche Größen für die Bildschirmauflösungen mit unterschiedlicher Größe festzulegen. Dies funktioniert nur mit neueren Browsern, ist aber einfach zu implementieren.
Die zweite Sache, die Sie tun könnten, wäre, JavaScript zu haben, überprüfen Sie die Bildschirmgröße und passen Sie entsprechend an.
Warum finden Sie nicht einfach die Mindestauflösung, mit der Ihre Website arbeitet, anstatt einen komplizierten Stylesheet oder JavaScript-Code zu erstellen? Benutzer mit kleineren Bildschirmgrößen sehen nur Bildlaufleisten:
%Vor% Es ist nicht wirklich eine Lösung, aber das würde ich tun. Haben Sie sich auch die anderen Möglichkeiten angesehen, ein <div> vertikal zu zentrieren? Ich werde Links zu einigen Methoden veröffentlichen.
Aus Gründen der Neugier, warum verwenden Sie eine top und eine negative Marge? ( margin-top: -340px )
Also ist es nur Auflösungen, wo 340px mehr oder fast die Hälfte des Maximums ist (a la 800x600px)?
ID schlägt vor, etwas wie das Setzen von div s auf min-height zu versuchen. Wenn Sie also ein Wrapper div haben und es dort einfügen, sollte es in Ordnung sein.
Dadurch wird <div id="wrapper"></div> zum übergeordneten div von <div id="centeredDiv"></div> und position: relative bewirkt, dass das übergeordnete Element div wie der offene Bereich behandelt wird, sodass 50% seiner Gesamthöhe verwendet werden . Wenn Sie dies tun, können Sie min-height verwenden, um die Seite zum Blättern zu zwingen, anstatt über den Browser zu fliegen.
Machen Sie den Floater-Trick - fügen Sie ein leeres Div oberhalb des Inhalts ein, setzen Sie die Höhe auf 50% und den Rand unten auf die negative Content-Höhe (die Content-Höhe muss fixiert sein).
%Vor%