wake-up-neo.net

Position nach Mittelpunkt und nicht nach links oben

Ist es möglich, den Code durch den Mittelpunkt eines Elements und nicht durch den oberen linken Punkt zu positionieren? Wenn mein parent -Element vorhanden ist

width: 500px;

und mein Kind Element hat

/*some width, for this example let's say it's 200px*/
position: absolute;
left: 50%;

man würde davon ausgehen, dass das untergeordnete Element basierend auf der 50%-Positionierung in der Mitte des übergeordneten Elements ist und auf jeder Seite 150px freien Speicherplatz belässt. Dies ist jedoch nicht der Fall, da der oberste linke Punkt des untergeordneten Elements zu 50% der Breite des übergeordneten Elements geht. Daher geht die gesamte Breite von 200px des untergeordneten Elements nach rechts und 250px bleibt nur links frei 50px auf der rechten Seite.

Meine Frage ist also, wie man eine Zentrierung erreicht ?

Ich habe diese Lösung gefunden:

position: absolute;
width: 200px;
left: 50%;
margin-left: -100px;

aber ich mag es nicht, weil Sie es manuell für jedes Element bearbeiten müssen - ich möchte etwas, das global funktioniert.

(Wenn ich beispielsweise in Adobe After Effects arbeite, kann ich eine Position für ein Objekt festlegen und dann einen bestimmten Ankerpunkt dieses Objekts festlegen, der an dieser Position platziert wird. Wenn die Zeichenfläche 1280px breit ist, positionieren Sie ein Objekt in 640px. und Sie wählen die Mitte des Objekts als Ankerpunkt, dann wird das gesamte Objekt in der 1280px-weiten Zeichenfläche zentriert.)

Ich würde mir so etwas in CSS vorstellen:

position: absolute;
left: 50%;
horizontal-anchor: center;

In ähnlicher Weise würde horizontal-anchor: right das Element an seiner rechten Seite positionieren, sodass der gesamte Inhalt von der 50%-Breite des übergeordneten Elements aus links wäre.

Dasselbe würde für vertical-anchor gelten, Sie erhalten es.

Ist so etwas möglich mit nur CSS (kein Scripting)?

Vielen Dank!

36
kaboom1

Wenn das Element absolut positioniert sein muss (also margin: 0 auto; nicht zum Zentrieren von Nutzen ist) und Skripting nicht in Frage kommt, können Sie dies mit CSS3-Transformationen erreichen.

.centered-block {
    width: 100px; 
    left: 50%; 
    -webkit-transform: translate(-50%, 0); 
    position: absolute;
}

Siehe diese Geige für einige Beispiele. Die wichtigsten Teile: left: 50%; schiebt den Block auf halbem Weg über das übergeordnete Element (die linke Seite befindet sich also auf der 50% -Marke, wie Sie bereits erwähnt haben). transform: translate(-50%, 0); zieht den Block um die halbe own - Breite entlang der x-Achse (dh nach links) zurück, wodurch er rechts in der Mitte des übergeordneten Elements platziert wird.

Beachten Sie, dass es unwahrscheinlich ist, dass dies Cross-Browser-kompatibel ist und für alte Browser dennoch eine Art Rückfall erforderlich ist.

46
John

Stolperte über diese Frage und ich möchte eine weitere Möglichkeit hinzufügen, um den Inhalt innerhalb eines Div zu zentrieren.

Durch Verwendung des CSS3-Anzeigemodus 'flexible Box', wie beim Festlegen der folgenden CSS-Eigenschaften auf das übergeordnete div

display: flex;
position: relative;
align-items: center;
justify-content:center;

Und 'zumindest' die folgenden Eigenschaften auf das untergeordnete div setzen

position:relative;

Der Browser zentriert den Inhalt automatisch im übergeordneten div, unabhängig von seiner Breite oder Höhe. Dies ist besonders praktisch, wenn Sie beispielsweise ein Bildraster entwickeln oder einfach den Aufwand für die Berechnung einer divs-Position entfernen möchten Berechnen Sie es neu, wenn Sie Ihre Meinung über die Einrichtung des Div. ändern.

In meiner eigenen Arbeit neige ich dazu, eine Klasse mit Namen aufzubauen

.center-center

Mit den Eigenschaften, die ich für das übergeordnete div beschrieben habe, fügen Sie es einfach zu dem Element hinzu, dessen Inhalt zentriert werden soll.

Ich habe ein JSFiddle erstellt, um diese Erklärung zu unterstützen. Klicken Sie auf die roten Quadrate, um die Positionierung in Aktion zu sehen.

https://jsfiddle.net/f1Lfqrfs/

Für die Unterstützung mehrerer Zeilen können Sie die folgende CSS-Eigenschaft zum übergeordneten DIV hinzufügen (oder in der JSF kommentieren)

flex-wrap: wrap;
2
Kay Angevare

Wenn das Hinzufügen eines anderen Elements eine Option ist, sollten Sie Folgendes beachten:

( Den folgenden Code live hier ansehen )

HTML:

<div class="anchor" id="el1">
    <div class="object">
    </div>
</div>
<div class="anchor" id="el2">
    <div class="object">
    </div>
</div>

CSS:

/* CSS for all objects */

div.object
{
    width:               100%;
    height:              100%;
    position:            absolute;
    left:                -50%;
    top:                 -50%; /* to anchor at the top center point (as opposed to true center) set this to 0 or remove it all together */
}

div.anchor
{
    position:            absolute; /* (or relative, never static) */
}


/* CSS for specific objects */

div#el1
{
    /* any positioning and dimensioning properties for element 1 should go here */
    left:                100px;
    top:                 300px;
    width:               200px;
    height:              200px;
}

div#el2
{
    /* any positioning and dimensioning properties for element 2 should go here */
    left:                400px;
    top:                 500px;
    width:               100px;
    height:              100px;
}

div#el1 > div.object
{
    /* all other properties for element 1 should go here */
    background-color:    purple;
}

div#el2 > div.object
{
    /* all other properties for element 2 should go here */
    background-color:    orange;
}

Im Wesentlichen richten wir ein Objekt ein, um die Position, Breite und Höhe des Elements zu definieren, und fügen Sie dann ein weiteres Objekt in das Objekt ein, das um 50% versetzt wird, und erhält die übergeordneten Abmessungen (dh width: 100%).

2
Sandy Gifford

Hier haben Sie eine Möglichkeit, ein Textelement in der Mitte des Containers zu zentrieren (Beispiel: Kopfzeile)

CSS:

.header {
     text-align: center;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     position: absolute;
}

Sie zentriert sich an einem mittleren Ankerpunkt.

1
Melinda Chang

Ich habe es mit transform: translateX mit calc für die horizontale Positionierung nach Elementmitte anstelle von oben links zum Laufen gebracht. Derselbe Trick kann für die vertikale Verwendung von transform: transformY verwendet werden. Dies funktioniert mit einer Breite von beliebigem Typ (Größe ändern)

Snippet: transform: translateX(calc(-50% + 223px));

Browser-Support: https://caniuse.com/#feat=transforms2d , https://caniuse.com/#feat=calc

Codepen für weitere Beispiele: https://codepen.io/manikantag/pen/KJpxmN

Hinweis zu offsetLeft/offsetTop etc: el.offsetLeft wird für CSS-transformierte Elemente nicht den richtigen Wert erhalten. Sie benötigen etwas wie el.getBoundingClientRect().left - el.offsetLeft - el.parentNode.offsetLeft( wie hier erwähnt )

Anmerkung zum Flusseffekt: wie in CSS-Dinge, die keinen Platz beanspruchen , transform wirkt sich nicht auf das folgende Element aus, ohne den durch Transformation verursachten Versatz zu berücksichtigen. Manchmal ist dies möglicherweise nicht das beabsichtigte Verhalten. Dies kann durch negative Ränder behoben werden, wenn width/height fixiert ist (funktioniert nicht, wenn width/height % verwendet).

.left-positioned {
  margin-left: 223px;
  background-color: lightcoral;
}

.center-positioned {
  transform: translateX(calc(-50% + 223px)); /*=====> actual solution */
  background-color: cyan;
}

.with-width {
  width: 343px;
  background-color: lightgreen;
}


/* styles not related to actual solution */

div {
  resize: both;
  overflow: auto;
}

.container {
  background-color: lightgray;
}

.ele {
  display: inline-block;
  height: 70px;
  text-align: center;
}
<div class="container">
  <div class="ele left-positioned">Reference element (left at 223px)</div> <br/>
  <div class="ele center-positioned">^<br/>Center positioned element (center at 223px)</div> <br/>
  <div class="ele center-positioned with-width">^<br/>Center positioned element with width (center at 223px)</div>
</div>

0
manikanta

links: 50% zentriert den Schwerpunkt dieses div nicht um 50% nach links, es ist der Abstand zwischen dem linken Rand und dem linken Rand des übergeordneten Elements. Daher müssen Sie einige Berechnungen durchführen.

left = Width(parent div) - [ Width(child div) + Width(left border) + Width(right border) ]

left = left / 2

Sie können also eine Javascript-Funktion ausführen ...

function Position(var parentWidth, var childWith, var borderWidth)
{
      //Example parentWidth = 400, childWidth = 200, borderWidth = 1
      var left = (parentWidth - ( childWidth + borderWidth));
      left = left/2;
      document.getElementById("myDiv").style.left= left+"px";
}
0
Ali Bassam