So zentrieren Sie jedes Element mit jQuery

In CSS gibt es verschiedene Möglichkeiten, HTML-Elemente zu zentrieren. Wenn Sie mit Elementen auf Blockebene arbeiten, können Sie den automatischen Trick „margin: 0“ verwenden, der Ränder verwendet, um jedes Element auf Blockebene genau in der Mitte seines übergeordneten Elements zu platzieren. Dieser Trick sieht so aus:

div{
   margin: 0 auto;
}

Wenn Sie Text zentrieren, verwenden Sie wahrscheinlich die einfache und unkomplizierte Eigenschaft text-align, etwa so:

p{
   text-align: center;
}

Bei Elementen, die nicht auf Blockebene oder Text sind (normalerweise sind Text-Tags Elemente auf Blockebene, es sei denn, ihnen wurde eine andere Anzeigeeigenschaft zugewiesen), ist es etwas schwieriger, sie zu zentrieren. Ein guter Trick für diese Situation besteht darin, die Positionierung auf „absolut“ oder „relativ“ zu setzen und dann der linken Eigenschaft einen Wert von 50 % zuzuweisen.

.inline-div{
   position: absolute;
   left: 50%;
}

Wenn keine dieser bewährten CSS-Methoden für Sie funktioniert, gibt es auch eine Möglichkeit, nahezu jedes Element in der Mitte einer Seite zu zentrieren, indem Sie nur jQuery-Code verwenden. Der folgende Ausschnitt zeigt Ihnen, wie Sie eine Funktion erstellen, die Sie Ihren Skripten hinzufügen können und die in der Lage sein sollte, alles zu zentrieren:

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

Der obige Code funktioniert tatsächlich, indem er die CSS-Eigenschaften des Elements manipuliert, das Sie zur Weiterleitung durch Ihre Funktion auswählen. Zuerst fügen wir dem Element position: absolute hinzu. Dann fügen wir der Top-Eigenschaft einen Wert hinzu, den wir mithilfe einer Gleichung berechnen (wir subtrahieren die Höhe des Elements von der Höhe des Fensters und dividieren diese dann durch die vertikale Position der Bildlaufleiste plus 2 plus px, sodass unser Die Antwort erfolgt in Pixel. Für die linke Eigenschaft verwenden wir fast genau dieselbe Gleichung, um die Zahl zu ermitteln, die der Wert der Eigenschaft sein soll, außer dass wir die horizontale Position der Bildlaufleiste und nicht die vertikale ermitteln. Im Grunde verhält sich dieser jQuery-Code also sehr ähnlich wie der obige Hack (der, bei dem wir die Positionierung des Elements und den linken Wert verwendet haben, um es horizontal zu zentrieren).

Der Unterschied zwischen dem jQuery-Code und dem CSS-Code besteht darin, dass er das Element sowohl horizontal als auch vertikal zentriert. Darüber hinaus werden die Zahlen in den oberen und linken Eigenschaften sehr genau berechnet. Um diese Funktion zu verwenden, müssen Sie nur das Element (oder die Elemente) auswählen, das Sie zentrieren möchten, und es dann wie folgt durch Ihre neue Funktion leiten:

$('.center-me').centerElement();

Das ist alles, was Sie brauchen, um mit jQuery Ihr Element auf einer Seite zu zentrieren. Die Verwendung von jQuery zum Zentrieren von Elementen sollte nicht Ihr erster Instinkt sein, da dies langsamer ist als die Verwendung von CSS. Wenn Sie sich jedoch in einer Situation befinden, in der CSS aus irgendeinem Grund nicht funktioniert oder Sie Ihre Elemente dynamisch zentrieren möchten, ist dies eine gute Option für Sie.

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen