Wie zentriert man ein "Position: absolut"-Element?

Question

Wie zentriert man ein "Position: absolut"-Element?

Gefragt el 14 de Dezember, 2011: Wann wurde die Frage gestellt
1271220 Ansichten: Anzahl der Besuche der Frage
5 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

Ich habe ein Problem beim Zentrieren eines Elements, das das Attribut position eingestellt auf 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="https://source.unsplash.com/random/300*300?technology" alt="Dummy 1" /></li>
      <li><img src="https://source.unsplash.com/random/301*301?technology" alt="Dummy 2" /></li>
    </ul>
  </div>
</body>

Gefragt el 14 de Dezember, 2011 von user1098278

Answer 1

5 Antworten

Answer 2

18voto

Mohammad Dayeh Punkte 299

    <div class="centered_content"> content </div>
    <style type="text/css">
    .centered_content {
       text-align: center;
       position: absolute;
       left: 0;
       right: 0;
    }
    </style>

siehe Demo auf: http://jsfiddle.net/MohammadDayeh/HrZLC/

text-align: center ; arbeitet mit einer position: absolute Element beim Hinzufügen von left: 0; right: 0;

Beantwortet el 24 de Kann, 2014 von Mohammad Dayeh (299 Punkte )

Answer 3

17voto

Vương Hữu Thiện Punkte 1009

Sie können das Attribut "transform" verwenden:

position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);

Beantwortet el 11 de Juli, 2021 von Vương Hữu Thiện (1009 Punkte )

Answer 4

15voto

Stéphane de Luca Punkte 11632

Je einfacher, desto besser:

img {
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto auto;
            position: absolute;
}

Dann müssen Sie Ihr img-Tag in ein Tag einfügen, das die Eigenschaft position:relative hat, wie folgt:

<div style="width:256px; height: 256px; position:relative;">
      <img src="photo.jpg"/>
</div>

Beantwortet el 14 de Februar, 2014 von Stéphane de Luca (11632 Punkte )

Answer 5

9voto

Matěj Husák Punkte 155

Wie viele andere dies sagten

.element {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
}

sollte funktionieren. Beachten Sie aber, dass die .element muss sich in einem Wrapper befinden, der position: relative hat; (für den Fall, dass Sie es nicht in der Mitte der gesamten HTML-Seite platzieren möchten)

ZU IHRER INFORMATION: Ich habe eine Pseudobibliothek für die CSS-Zentrierung erstellt. Ich brauchte es für meine Dev-Junioren. Sie können es also gerne ausprobieren. http://dev.solcode.net/centercss/

Beantwortet el 15 de Dezember, 2021 von Matěj Husák (155 Punkte )

Answer 6

9voto

Cris Punkte 2403

Wahrscheinlich der kürzeste

position:absolute;
left:0;right:0;top:0;bottom:0;
margin:0 auto;

Beantwortet el 19 de November, 2018 von Cris (2403 Punkte )

Wie zentriert man ein "Position: absolut"-Element?

Antworten

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

Wie zentriert man ein "Position: absolut"-Element?

Antworten

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: