brauche Hilfe CSS-Zentrierung mit absoluter Positionierung

Ich war nie völlig mit meinen verschiedenen Lösungen zur Zentrierung von Inhalten auf einer Webseite zufrieden. Die Marke <center> wurde Mitte des 18. Jahrhunderts abgeschafft, aber ich sehe keine vernünftige Alternative. Insbesondere möchte ich einen Eltern-DIV haben, der zentriert ist, aber gegen dessen obere linke Ecke ich Dinge "absolut" setzen kann.brauche Hilfe CSS-Zentrierung mit absoluter Positionierung

Gibt es eine Möglichkeit, dies zu erreichen, ohne window.onresize Javascript zu verwenden, das alles neu misst? Es scheint wie eine ziemlich geradlinige Idee ... Ich möchte Dinge absolut positioniert, ich möchte nur die 0,0-Koordinate relativ zu etwas anderem als die obere linke Ecke des Browser-Fensters.

Im Moment setze ich ein div, um seinen Inhalt zu zentrieren und dann mit relativer Positionierung herumzuschnüffeln, aber das ist sehr ermüdend, weil sich relative Objekte gegenseitig auf eine Art und Weise schubsen, die ich absolut nicht will.

Alle Gedanken zu diesem sehr geschätzt.

Quelle

2009-06-23 Genia S.

Ist das wonach Sie suchen?

<div style=" position: absolute; 
      display: inline-block; 
      top: 20%; 
      bottom: 20%; 
      right: 20%; 
      left: 20%; 
      background-color: #434154; 
      text-align: center;"> 
    <div style="display: inline-block; 
       height: 100%; 
       vertical-align: middle;"></div> 
    <div style="position: relative; 
       color: #FFFFFF; 
       background-color: #546354; 
       display: inline-block; 
       vertical-align: middle;"> 
       THIS IS CENTERED WITHOUT SCRIPTING :D 
    </div> 
</div>

Quelle

2013-06-22 09:51:33 chinanzio

ja, danke. Ich bevorzuge diese Antwort diejenige, die ich ausgewählt habe. –

Willst du keine relative Positionierung, wenn 0,0 relativ zu einem div ist?

Quelle

2009-06-23 18:57:12 Tony

nein, will ich die Dinge in diesem div genauen Standorte haben, aber wenn man die Dinge beginnen, auf „absolute“ sie in einer Reihe aufstellen gegen die oben links im Browser anstatt der übergeordneten div . –

Ich nice Möglichkeit, Sachen zu zentrieren, ist die Verwendung der "Marge: Auto" -Css-Tag. Dies funktioniert in FF und Safari. Geben Sie einfach ein div eine gewisse Breite und einen Rand auto, und wenn das übergeordnete Element 100% Breite ist, wird sich dieses div zentrieren.

Damit dies in IE funktioniert, müssen Sie das text-align: center-Attribut auf dem Eltern und dann Text-Align links auf dem tatsächlichen zentrierten div.

AFAIK, es gibt keine Möglichkeit, die absoluten Koordinaten von 0,0 zu einem anderen Arbitrationspunkt zu ändern. Relativ ist der Weg zu gehen.

Quelle

2009-06-23 18:58:44 Shreyas

verwenden Sie die linken, rechten, oberen und unteren CSS-Eigenschaften, um ein Element zu positionieren, das z. B. relative oder absolute Position hat. oben: 10px; verschiebt das Element 10 Pixel von oben nach oben. – roborourke

body { text-align: center; } 
#wrapper { width: 960px; margin: 0 auto; text-align: left; position: relative; } 
#wrapper .child { position: absolute; left: 0; top: 0; }

Nur Beispielcode, aber jedes .child Element bei 0,0 der Umhüllung

Jedes absolut positioniertes Element wird absolut Lage sein würde, um es am nächsten Positions relativ Eltern. Wenn ein Element kein übergeordnetes Element mit relativer Position hat, wird nur das Dokument verwendet. Unten ist ein Beispiel ohne Klassen (einige Farben und Breite Stile hinzugefügt für die Klarheit).

<html> 
    <body style="text-align: center;"> 
     <div style="position: relative; width: 100px; height: 100px; margin: 0 auto; background: red;"> 
      <div style="position: absolute; left: 0; top: 0;"> 
       This will absolutely position relative to the container div. 
      </div> 
     </div> 
     <div style="position: absolute; left: 0; top: 0; width: 100px; height: 100px; background: blue;"> 
      This will absolutely position relative to the document 
     </div> 
    </body> 
</html>

Quelle

2009-06-23 18:59:35

das funktioniert völlig, und ist genau das, was ich gesucht habe. Ich bin auf einem Mac, atm und teste in FF und Safari. Funktioniert das gleiche in IE (ich interessiere mich nicht für IE6, nur die neueren Versionen). –

gerade in IE getestet ... funktioniert wie ein Charme. Also, der Schlüssel zum ganzen Unternehmen besteht darin, Klassen zu haben, die als zur Stil-ID gehörend definiert sind, dh: # id.classname Sehr interessant. –

Eigentlich nein - siehe Update für weitere Erklärungen –

vielleicht habe ich die Aufgabe nicht verstehen, aber ich glaube, Sie

margin: 0 auto;

zum Zentrieren Ihre divs

Quelle

2009-06-23 18:59:35 Roman

Verwenden Sie relative Positionierung auf dem übergeordneten verwenden können und geben, die gleiche Element die Eigenschaft:

Der Elternteil ist jetzt positioniert und Sie sollten Elemente abso einstellen können Lauter in ihm.

Beispiel:

div#page{ 
    position:relative; 
    width:400px; 
    margin:0 auto; 
} 

div#page #absoluteExample{ 
    position:absolute; 
    top:18px; 
    left:100px; 
}

Quelle

2009-06-23 19:11:31 moorej

Wenn Sie mit kleben sind position: absolute; dann den div, dass Sie die Dinge gegen positioniert werden sollen position: relative;, um es in den Positionierungskontext für alle untergeordneten Elemente zu machen.

ein absolut positionierte div Zum Zentrieren Sie wissen müssen, um es Breite ist, dann verwenden Sie die folgende CSS:

#wrapper { 
    width: 800px; 
    margin: 0 auto; 
    position: relative; /* creates a positioning context for child elements */ 
} 

#child { 
    position: absolute; 
    width: 400px; 
    left: 50%; 
    margin-left: -200px; 
}

Und die HTML:

<div id="wrapper"> 
    <div id="child"> 
     .... 
    </div> 
</div>

Sie die Breite und linken Rand zwicken kann als Sie müssen es (der negative linke Rand sollte die Hälfte der Breite der div sein, die Sie zentrieren z. B. #child.

Wie andere Leute miterwähnt habenauf einem Element mit einer darauf gesetzten Breite zentriert es.

Quelle

2009-06-23 19:12:53 roborourke

Die text-align: center; Eigenschaft tut, was <center> verwendet, und es ist weit überlegen.

Einzige Sache ist, es ist ein bisschen komplexer zu verwenden. Sobald Sie den Dreh raus haben, werden Sie sich fragen, warum Sie schon so viele Probleme hatten!

Sie müssen es in Koordination mit den Eigenschaften anderer Elemente auf der Seite verwenden. Das ist das Problem, das Entwickler/Designer mit CSS und neueren HTML-Technologien haben. Es gibt uns eine mächtige Möglichkeit, unsere Seitenelemente zu präsentieren, macht es jedoch viel komplexer und strenger.

Mike Robinson Antwort löst sicherlich das Problem, das Sie hier haben, und es ist ein großartiges Beispiel. Aber ...

Ich glaube nicht, eine Antwort wird Ihnen zeigen, wie Sie text-align richtig für alle Fälle verwenden, die Sie stoßen werden, aber versuchen Sie herauszufinden, wie Positionierung in CSS tiefer geht.

Quelle

2009-06-23 19:53:45 Travis

Der einfachste Weg:

#element { 

position: absolute; /*Absolute Position*/ 

top: 0; 
left: 0;   /*Set the 4 coordinates to zero*/ 
bottom: 0; 
right: 0; 

margin: auto;  /*Margin to Auto*/ 

height: 150px; /*Set the Height and Width*/ 
width:150px; 

background:green; /* Backgroung:optional*/

}

Dies wird es in der Mitte bringen rechts, egal es Größe.

Hoffe, dass hilft!

See Fiddle: http://jsfiddle.net/kfPC6/

Quelle

2013-10-16 15:09:34 ErickBest

brauche Hilfe CSS-Zentrierung mit absoluter Positionierung

Antwort

Verwandte Themen