918 Stimmen

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

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>

1voto

Ryan Gibbons Punkte 3415

Position absolut nimmt es aus dem Fluss heraus und platziert es an 0x0 zum übergeordneten Element (letztes Blockelement, das eine absolute oder relative Position hat).

Ich bin mir nicht sicher, was genau Sie zu erreichen versuchen, es könnte am besten sein, die li auf eine position:relative und das wird sie zentrieren. Angesichts Ihrer aktuellen CSS

Überprüfen Sie http://jsfiddle.net/rtgibbons/ejRTU/ um damit zu spielen

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X