mit calc mit auto margin
Wollte ich mit margin-right auf auto + ein paar Pixel durch die Verwendung von css3 calc() scheint aber die Aussage ist falsch.
selector{margin: calc(auto + 5px);
So, wie Sie verwenden können, so dass es kann nehmen Sie die automatische Rand-und plus-fixed-Pixel-Marge?
Sowas!
- zeigen Sie uns Ihre html-oder Sie geben uns ein Turnschuh, so dass wir für Sie ausarbeiten..
- jsfiddle.net/jP7mN
- Ich habe versucht, durch die Definition von Prozentsatz, aber es wird nicht gehen, da meine div ist kleiner oder größer kann.
- Betrachten Sie binden alle Elemente in einem container mit
margin: auto
und als Abzug der Marge, wie ich Ihnen gezeigt, in meinem Beispiel - also ich habe zu verschiedenen Marge für verschiedene divs, aber ich wollte einmal verwenden.
- Sie sind nur kompliziert, es sollte nicht so sein
- Ähm, deine Antwort ist okay, denn wenn ich 5% als 5px, dann wird es gehen genau das, was ich will. Aber ohne text-align-center ist das möglich?
- Gut, der CSS-Positionierung ist eine Alternative Möglichkeit zu 🙂
- hoffe halten margin - @ auto und translateX -5px wird den trick tun, glaube ich.
- Die Frage ist grundsätzlich mit einigen Prozentrechnung. Also sowohl in meiner Antwort.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Vom MDN :
Du nicht verwenden
auto
es, wie es ist kein Gültiger Wert fürcalc()
.Grammatik für
calc()
Weitere Informationen finden Sie unter der Docs
Als Sie bemerkte, dass Sie wollen, um die Mitte der
div
aber Sie wollen auch ein5px
margin
auf dieright
als Sie es erreichen können, indem Sie mittext-align: center;
auf das übergeordnete element und das Kinddiv
Elementedisplay: inline-block;
Demo
Ausgabe
5px
margin
auf der rechten Seite? Können Sie zeigen, eine gegenständliche Weise, was Sie erwarten?Blick auf meine eigene Frage heute, ich schäme mich, warum ich nicht denke, dass es richtig? Im Grunde, auto margin ist, was linken Rand auf 50% minus Breite der div. In dieser basis können wir layout element wie diesem:
Mithilfe der obige code ist äquivalent zu
calc(auto + 5px);
. Da calc nicht unterstützt auto-wir müssen trick mit dem eigentlichen Konzept der übersetzung. Das heißt, wir können auch das layout mit absoluten position mit dem Konzept der50% - half of width
, aber ich magtransform
hier der Einfachheit halber.Siehe demo unter:
CSS:
HTML:
Erhöhen oder verringern Sie die plus-minus-Wert von Links und rechts, um es richtig zu verstehen.
Hinweis: unter den unten angegebenen code
ist identisch mit:
für dieses Konzept.
Beachten Sie auch, dass die Frage sich auf rund Prozentrechnung plus minus die gewünschte Verschiebung. Also diese Antwort, Sie hat sowohl calc und Transformation. Wenn Sie genau benötigen, um Verschiebung auf Mitte, dann könnten wir Sie einfach verwenden (ohne margin-left oder margin-right):
Die Antwort ist mit 50% calc, aber die Frage war, die zu verwenden, die einen Prozentsatz wie
calc(20% - 20px)
.