Wie kann ich mit jQuery ein DIV-Element auf einer Webseite zentrieren?

Mit jQuery ein DIV zentral auf der Webseite positionieren

Die Zentrierung eines DIV-Elements auf dem Bildschirm ist eine häufige Anforderung in der Webentwicklung . jQuery bietet hierfür eine praktische Lösung.

Lösung:

Um ein DIV mit jQuery zu zentrieren, können Sie die folgende Funktion nutzen:

jQuery.fn.center = function () {
    this.css("position", "absolute");
    this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + 
                                                $(window).scrollTop()) + "px");
    this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + 
                                                $(window).scrollLeft()) + "px");
    return this;
}

Diese Funktion ändert die Position des DIVs, indem sie die Mittelpunktskoordinaten basierend auf der Bildschirmgröße und den DIVs berechnet Abmessungen.

Verwendung:

Sobald die Funktion zu jQuery hinzugefügt wurde, können Sie sie einfach auf dem Ziel-DIV mit der folgenden Syntax aufrufen:

$(element).center();

Dadurch wird das DIV auf zentriert Bildschirm.

Demo:

Um diese Funktion zu demonstrieren, können Sie sich auf die folgende Fiddle beziehen, die einen zusätzlichen Parameter zur Steuerung der Zentriergenauigkeit enthält:

[Fiddle Link]

Durch die Verwendung dieser jQuery-Funktion können Sie jedes DIV-Element ganz einfach zentral auf Ihrer Webseite positionieren.

Das obige ist der detaillierte Inhalt vonWie kann ich mit jQuery ein DIV-Element auf einer Webseite zentrieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!