Angenommen, ich habe ein "div"-Element, das ich in der Anzeige des Browsers (Viewport) zentrieren möchte. Um dies zu tun, muss ich die Breite und Höhe des "div"-Elements berechnen.
Was sollte ich verwenden? Bitte geben Sie auch Informationen zur Browserkompatibilität an.
ANMERKUNG: *Diese Antwort wurde im Jahr 2008 geschrieben. Zu der Zeit war die beste Cross-Browser-Lösung für die meisten Menschen wirklich jQuery zu verwenden. Ich lasse die Antwort hier für die Nachwelt, und wenn Sie jQuery verwenden, ist dies ein guter Weg, um es zu tun. Wenn Sie ein anderes Framework oder reines JavaScript verwenden, ist die akzeptierte Antwort wahrscheinlich der richtige Weg.
Ab jQuery 1.2.6 können Sie eine der zentralen CSS-Funktionen, height
und width
(oder outerHeight
und outerWidth
, je nach Bedarf) verwenden.
var height = $("#myDiv").height();
var width = $("#myDiv").width();
var docHeight = $(document).height();
var docWidth = $(document).width();
element.offsetWidth und element.offsetHeight sollten ausreichen, wie im vorherigen Beitrag vorgeschlagen.
Wenn Sie jedoch nur den Inhalt zentrieren wollen, gibt es eine bessere Möglichkeit, dies zu tun. Angenommen, Sie verwenden xhtml strict DOCTYPE. Setzen Sie die Eigenschaft margin:0,auto und die erforderliche Breite in px auf den body-Tag. Der Inhalt wird mittig auf der Seite ausgerichtet.