müssen CSS Hilfe bei der absoluten Positionierung Zentrierung
https://stackoverflow.com/questions/1034449
-
06-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Ich habe noch nie mit meinen verschiedenen Lösungen total zufrieden Inhalte in einer Web-Seite zu zentrieren. der <center>-Tag wurde in der Mitte des 18. Jahrhunderts als veraltet zurück, aber ich kann nicht eine vernünftige Alternative zu sehen. Insbesondere, was ich will, ist ein Elternteil DIV zu haben, die zentriert ist, aber gegen die obere linke Ecke, deren ich kann die Dinge gesetzt „absolut“.
Gibt es eine Möglichkeit, dies zu erreichen, ohne mit Hilfe von Javascript window.onresize, die alles einer Neubewertung? Es scheint wie eine recht geradlinig Idee ... Ich mag die Dinge absolut positionierten, ich will nur die Koordinate 0,0 auf etwas anderes als die linke obere Ecke des Browserfensters relativ zu sein.
Im Moment, was ich tun gesetzt ist ein div seinen Inhalt zu zentrieren und dann mit der relativen Positionierung Nudel herum, aber das ist sehr ermüdend, weil relativ Objekte einander um in einer Weise weiter pushen, dass ich nicht völlig wollen.
Jede und alle Gedanken auf diesem sehr geschätzt.
Lösung
Ist das, was 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>
Andere Tipps
body { text-align: center; }
#wrapper { width: 960px; margin: 0 auto; text-align: left; position: relative; }
#wrapper .child { position: absolute; left: 0; top: 0; }
Just Beispielcode, aber jedes .child Element bei 0,0 der Umhüllung sein würde
Jedes absolut positioniertes Element wird absolut Position, um es am nächsten Positions relativ Eltern. Wenn ein Element nicht einen Elternteil mit Position relativ hat, verwendet er nur das Dokument. Unten ist ein Beispiel ohne Klassen (etwas Farbe und Breite Stile für Klarheit hinzugefügt).
<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>
Wenn Sie mit position: absolute; kleben sind stellen Sie dann die 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 können die Breite und linken Rand zwicken, wie Sie es (der negativer linke Rand benötigen, sollte die Hälfte der Breite des div sind Sie Zentrierung zB. #child.
Wie andere Menschen auf ein Element mit margin: 0 auto; erwähnt haben mit einer Breite festgelegt auf sie wird es zentriert wird.
ich schöne Möglichkeit, Sachen zum Zentrum ist den „margin: auto“ zu verwenden CSS-Tag. Dies funktioniert in FF und Safari. Geben Sie einfach ein div gewisse Breite und eine Marge Auto, und wenn die Eltern 100% Breite ist, dann wird dieses div selbst Zentriert.
Für die in IE zu arbeiten, müssen Sie den Text-align verwenden. Zentrum Attribut auf den übergeordneten und dann text-align auf der tatsächlichen zentrierte div links
AFAIK, gibt es keine Möglichkeit, die absoluten Koordinaten von 0,0 bis zu einem gewissen anderen arbit Punkt zu ändern. Relative ist der Weg zu gehen.
vielleicht habe ich die Aufgabe nicht verstehen, aber ich denke, Sie verwenden können,
margin: 0 auto;
für Ihre divs Zentrierung
Verwenden Sie relative Positionierung auf dem übergeordneten und geben, dass gleiche Element die Eigenschaft:
margin: 0 auto;
Die Mutter jetzt positioniert ist, und Sie sollten Elemente einstellen können absolut in sie.
Beispiel:
div#page{
position:relative;
width:400px;
margin:0 auto;
}
div#page #absoluteExample{
position:absolute;
top:18px;
left:100px;
}
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 richtig in der Mitte zu bringen, egal, es ist Größe.
Ich hoffe, das hilft!
Siehe Fiddle: http://jsfiddle.net/kfPC6/
Möchten Sie nicht die relative Positionierung, wenn 0,0 auf ein div sein relativ wird?
Die text-align: center; Eigenschaft macht, was <center> verwendet und es ist weit überlegen es.
Nur Sache ist, es ist ein wenig komplexer zu bedienen. Sobald Sie den Dreh raus bekommen, werden Sie sich fragen, warum Sie vor! So viel Mühe, wurden
Sie müssen es in Abstimmung verwenden, um mit den Eigenschaften anderer Elemente auf der Seite. Das ist das Problem Entwickler / Designer mit CSS und neueren HTML-Technologien haben. Es gibt uns eine leistungsstarke Möglichkeit, unsere Seite Elemente zu präsentieren, sondern macht es sehr viel komplexer und streng.
Mike Robinson Antwort löst sicherlich das Problem, das Sie hier sind mit und es ist ein gutes Beispiel. Aber ...
Ich glaube nicht, dass eine Antwort, die Sie zeigen, wie text-align für alle Fälle richtig nutzen Sie stoßen aber versuchen darüber nachdachte, wie Positionierung in CSS funktioniert mehr in die Tiefe.
