Sie müssen sie einzeln einstellen.
Ich habe eine Variable erstellt, die auf das Objekt style zeigt, weil wir mehr als eine Eigenschaft modifizieren und weil with() { ... } als schädlich angesehen .
Außerdem habe ich 50% auf beide Eigenschaften gesetzt, weil die Zuordnung von rechts nach links erfolgt, und weil die Zuweisung dieser Zeichenfolge an die beiden Eigenschaften kein Problem darstellt (vergewissern Sie sich, dass dies funktioniert, zB var a = b = [] ) Setzen Sie a und b auf das Objekt same Array , das oft nicht erwünscht ist.
jsFiddle .
Ich mache das Folgende, um ein Element in seinem Elternelement zu zentrieren - das könnte der Körper oder eine andere Abteilung sein.
document.getElementById ("elementId"). style.marginLeft="auto"; document.getElementById ("elementId"). style.marginRight="auto";
Die Eigenschaft position legt fest, wie das Element in Relation zu den anderen Elementen auf der Seite platziert wird.
Ich habe gerade eine Suche durchgeführt, um zu sehen, ob die position -Eigenschaft Werte wie die 50% annehmen kann, die Sie in Ihrer Frage zeigen - das kann nicht.
Ich habe überprüft, ob etwas neues CSS hinzugefügt wurde, das die Position auf etwas anderes als die unten gezeigten setzen lässt. Ich dachte, dass ich vielleicht falsch lag in Bezug auf die Werte, die Position einnehmen kann (und alles tun kann - Sie können immer Werte für verschiedene Eigenschaften codieren, als sie eigentlich haben sollen, aber sie werden nichts tun). Ich sehe nichts, was sagt, dass Position Werte wie 50% haben und tatsächlich etwas tun kann.
Die möglichen Werte der position -Eigenschaft sind:
relativ
behoben
absolut
statisch
erben
oder Sie können es vom Element lassen. Von dem, was ich gesehen habe Position: statische verhält sich genauso, als ob Sie nicht die Position-Eigenschaft für das Element oder die Klasse codiert haben.
Die Eigenschaft position kann verwirrend sein, bis Sie die Auswirkungen der verschiedenen Werte auf die Position des Elements sehen - und auch dann ist es nicht immer klar.
Übrigens - Sie können auch style.left und style.top ändern, aber sie haben keine Auswirkungen, wenn die Position nicht auf einen der möglichen Werte gesetzt ist.
Ich weiß, das hört sich komisch an, aber so funktionieren die Dinge momentan (und ich bezweifle, dass es jemals geändert wird) und wir müssen damit leben.
Wenn Sie also oben und / oder links setzen und nichts passiert, sehen Sie sich den Wert für die Positionseigenschaften an,
Sie können mit Eigenschaftswerten mit der Funktion "Element prüfen" Ihres Browsers "spielen". Ich denke, dass alle großen Browser eine solche Möglichkeit haben. Lesen Sie diese Seite über "inspizieren"
Sie können CSS-Eigenschaften ändern, löschen und neue hinzufügen, wenn Sie die Seite in Ihrem Browser betrachten. Sie können z. B. den Rand links auf auto und den Rand rechts auf auto setzen und sehen, wie das Element positioniert ist. Sie können beliebige CSS-Eigenschaften ändern, hinzufügen oder löschen.
Sie können die Position auch in mehrere Werte ändern (statisch, relativ, absolut oder fest), um zu sehen, wie das Element in Beziehung zu den anderen Elementen auf der Seite angezeigt wird.
Wenn Sie eine Eigenschaft entfernen möchten, können Sie ihren Wert hervorheben und auf Löschen drücken und eingeben - das wird die Eigenschaft aus dem Element oder der Klasse entfernen, wenn Sie sich Klasse CSS ansehen.
Mit dieser Funktion können Sie "what if" mit den Eigenschaften eines Elements wiedergeben, ohne das HTML oder CSS zu ändern und die Seite neu zu laden.
Ich schlage vor, dass Sie einen Stift und ein Blatt Papier haben und sich jedes Mal Notizen machen, wenn Sie etwas ändern. Wenn Sie dies nicht tun, können Sie die Dinge so bekommen, wie Sie es wollen und sich nicht an alles erinnern können .
Hinweise sind sehr wichtig!
Um es noch einmal zu wiederholen: Um ein Element in seinem Elternelement zu zentrieren, codiere das was folgt - ersetzt Elementid durch die ID deines Elements.
document.getElementById ("elementId"). style.marginLeft="auto"; document.getElementById ("elementId"). style.marginRight="auto";
Wie für den Positionswert, versuchen Sie alles mit dem Element-Inspector in Ihrem Browser. Das ist ein schneller Weg, um die Auswirkungen der möglichen Werte der position -Eigenschaft zu verstehen.
Tags und Links javascript css