Ich habe ein Problem beim Zentrieren eines Elements, für das das Attribut position
festgelegt ist absolute
. Weiß jemand, warum die Bilder nicht zentriert sind?
body {
text-align: center;
}
#slideshowWrapper {
margin-top: 50px;
text-align: center;
}
ul#slideshow {
list-style: none;
position: relative;
margin: auto;
}
ul#slideshow li {
position: absolute;
}
ul#slideshow li img {
border: 1px solid #ccc;
padding: 4px;
height: 450px;
}
<body>
<div id="slideshowWrapper">
<ul id="slideshow">
<li><img src="img/dummy1.JPG" alt="Dummy 1" /></li>
<li><img src="img/piano_unlicened.JPG" alt="Dummy 2" /></li>
</ul>
</div>
</body>
html
css
css-position
centering
user1098278
quelle
quelle
Antworten:
Wenn Sie eine Breite festgelegt haben, können Sie Folgendes verwenden:
quelle
Ohne das
width
/height
des positionierten 1- Elements zu kennen, ist es weiterhin möglich, es wie folgt auszurichten:BEISPIEL HIER
Es ist erwähnenswert, dass CSS Transform in IE9 und höher unterstützt wird . (Herstellerpräfixe wurden der Kürze halber weggelassen)
Erläuterung
Durch Hinzufügen von
top
/left
of wird50%
die obere / linke Randkante des Elements in die Mitte des übergeordneten Elements verschoben, undtranslate()
mit dem (negativen) Wert von wird-50%
das Element um die Hälfte seiner Größe verschoben. Daher wird das Element in der Mitte positioniert.Dies liegt daran, dass ein Prozentwert für
top
/left
properties relativ zur Höhe / Breite des übergeordneten Elements ist (wodurch ein enthaltender Block erstellt wird).Während ein Prozentwert für die Transformationsfunktion relativ zur Breite / Höhe des Elements selbst ist (bezieht sich tatsächlich auf die Größe des Begrenzungsrahmens ) .
translate()
Für eine unidirektionale Ausrichtung gehen Sie mit
translateX(-50%)
odertranslateY(-50%)
stattdessen.1. Ein Element mit einem
position
anderen alsstatic
. Dhrelative
,absolute
,fixed
Werte.quelle
position: absolute; left: 50%; transform: translateX(-50%);
, vertikale Zentrierung :position: absolute; top: 50%; transform: translateY(-50%);
.translate
Eigenschaft gefunden, das Element durch die Größe von sich selbst zu übersetzen , egal wie groß das übergeordnete Element ist .Das Zentrieren von etwas
absolute
Positioniertem ist in CSS ziemlich kompliziert.Ändern Sie
margin-left
die Hälfte des Elements, das Sie zentrieren möchten, auf (negativ).quelle
Vertikal und horizontal ausgerichtete Mitte teilen
Hinweis: Elemente sollten Breite und Höhe haben, die eingestellt werden sollen
quelle
height
Satz, damit dies funktioniert.Ein einfacher CSS-Trick, fügen Sie einfach hinzu:
Dies funktioniert sowohl bei Bildern als auch bei Text.
quelle
Wenn Sie ein absolutes Element zentrieren möchten
Wenn Sie möchten, dass ein Container von links nach rechts zentriert wird, jedoch nicht von oben nach unten
Wenn Sie möchten, dass ein Container von oben nach unten zentriert wird, unabhängig davon, ob er von links nach rechts ausgerichtet ist
Aktualisierung zum 15. Dezember 2015
Nun, ich habe diesen neuen Trick vor ein paar Monaten gelernt. Angenommen, Sie haben ein relatives übergeordnetes Element.
Hier geht dein absolutes Element.
Damit denke ich, dass es eine bessere Antwort ist als meine alte Lösung. Da müssen Sie nicht Breite UND Höhe angeben. Dieser passt den Inhalt des Elements selbst an.
quelle
So zentrieren Sie ein Element „Position: absolut“.
quelle
Das hat bei mir funktioniert:
quelle
Um eine Position zu zentrieren: Absolutes Attribut, das Sie links einstellen müssen: 50% und Rand-links: -50% der Breite des Div.
Für die vertikale Mitte absolut müssen Sie das gleiche tun, Knospe nicht mit links nur mit oben. (HINWEIS: HTML und Body müssen eine Mindesthöhe von 100% haben;)
und kann für beide kombiniert werden
quelle
Siehe Demo unter: http://jsfiddle.net/MohammadDayeh/HrZLC/
text-align: center
;; arbeitetposition: absolute
beim Hinzufügen mit einem Elementleft: 0; right: 0;
quelle
Je einfacher, desto besser:
Dann müssen Sie Ihr img-Tag wie folgt in ein Tag mit der Position position: relative Eigenschaft einfügen:
quelle
wahrscheinlich die kürzeste
quelle
Wenn Sie die Breite des Elements nicht kennen, können Sie diesen Code verwenden:
Demo bei fiddle: http://jsfiddle.net/wrh7a21r/
Quelle: https://stackoverflow.com/a/1777282/1136132
quelle
Oder Sie können jetzt eine Flexbox mit absoluter Position verwenden:
quelle
Ich bin mir nicht sicher, was Sie erreichen wollen, aber in diesem Fall reicht es aus, nur
width: 100%;
Ihrenul#slideshow li
Willen zu erhöhen.Erläuterung
Die
img
Tags sind Inline-Block-Elemente. Dies bedeutet, dass sie wie Text inline fließen, aber auch eine Breite und Höhe wie Blockelemente haben. In Ihrem CSS gibt es zweitext-align: center;
Regeln, die auf das<body>
und das#slideshowWrapper
(was übrigens redundant ist) angewendet werden. Dadurch werden alle untergeordneten Inline- und Inline-Block-Elemente in ihren nächsten Blockelementen zentriert. In Ihrem Code sind diesli
Tags. Alle Blockelemente haben,width: 100%
wenn es sich um den statischen Fluss (position: static;
) handelt, der standardmäßig verwendet wird. Das Problem ist, dass Sieli
Tags , wenn Sie sie anweisen,position: absolute;
aus dem normalen statischen Fluss herausnehmen. Dies führt dazu, dass sie ihre Größe verkleinern, um nur ihrem inneren Inhalt zu entsprechen. Mit anderen Worten, sie "verlieren" ihrewidth: 100%
Eigenschaft.quelle
Die Verwendung von
left: calc(50% - Wpx/2);
W ist die Breite des Elements.quelle
Ihre Bilder sind nicht zentriert, da Ihre Listenelemente nicht zentriert sind. nur ihr Text ist zentriert. Sie können die gewünschte Position erreichen, indem Sie entweder die gesamte Liste oder die Bilder in der Liste zentrieren.
Eine überarbeitete Version Ihres Codes finden Sie unten. In meiner Überarbeitung zentriere ich sowohl die Liste als auch die darin enthaltenen Bilder.
Die Wahrheit ist, dass Sie ein Element nicht zentrieren können, dessen Position auf absolut gesetzt ist.
Aber dieses Verhalten kann nachgeahmt werden!
Hinweis: Diese Anweisungen funktionieren mit jedem DOM-Blockelement, nicht nur mit img.
Umgeben Sie Ihr Bild mit einem div oder einem anderen Tag (in Ihrem Fall einem li).
Hinweis: Die Namen dieser Elemente sind nicht speziell.
Ändern Sie Ihr CSS oder SCS, um die absolute Positionierung des Div und Ihr zentriertes Bild zu erhalten.
Und da hast du es! Dein Bild sollte zentriert sein!
Dein Code:
Probieren Sie es aus:
Ich hoffe das war hilfreich. Viel Glück!
quelle
Ein absolutes Objekt innerhalb eines relativen Objekts ist relativ zu seinem übergeordneten Objekt. Das Problem hierbei ist, dass Sie eine statische Breite für den Container benötigen
#slideshowWrapper
und der Rest der Lösung den Angaben der anderen Benutzer entsprichthttp://jsfiddle.net/ejRTU/10/
quelle
Hier ist eine einfache und beste Lösung für das Mittelelement mit „Position: absolut“.
quelle
Sie können dies folgendermaßen versuchen:
quelle
Position absolute nimmt es aus dem Fluss heraus und platziert es bei 0x0 zum übergeordneten Element (letztes Blockelement, um eine absolute Position oder eine relative Position zu haben).
Ich bin mir nicht sicher, was genau du bist, was du erreichen willst. Es könnte am besten sein, das Li auf a zu setzen,
position:relative
und das wird sie zentrieren. Angesichts Ihres aktuellen CSSSchauen Sie sich http://jsfiddle.net/rtgibbons/ejRTU/ an, um damit zu spielen
quelle
Ich kann mich nicht erinnern, wo ich die oben aufgeführte Zentrierungsmethode mit negativen Werten für oben, rechts, unten und links gesehen habe. Für mich ist diese Technik in den meisten Situationen die beste.
Wenn ich die Kombination von oben verwende, verhält sich das Bild wie ein Hintergrundbild mit den folgenden Einstellungen:
Weitere Details zum ersten Beispiel finden Sie hier:
Pflegen Sie das Seitenverhältnis eines Div mit CSS
quelle
Was zu passieren scheint, ist, dass es zwei Lösungen gibt; Mit Rändern zentriert und mit Position zentriert. Beide funktionieren einwandfrei. Wenn Sie jedoch ein Element relativ zu diesem zentrierten Element absolut positionieren möchten, müssen Sie die Methode für die absolute Position verwenden, da die absolute Position des zweiten Elements standardmäßig das erste übergeordnete Element ist, das positioniert ist. Wie so:
Bis ich diesen Beitrag mit der automatischen Technik margin: 0 gelesen hatte, um ein Menü links von meinem Inhalt zu erstellen, musste ich rechts eine Spalte gleicher Breite erstellen, um es auszugleichen. Nicht hübsch. Vielen Dank!
quelle
Verwenden Sie,
margin-left: x%;
wobei x die Hälfte der Breite des Elements ist.quelle
quelle