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
1271222 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

4voto

eveevans Punkte 4312

Ein absolutes Objekt innerhalb eines relativen Objekts ist relativ zu seinem übergeordneten Objekt; das Problem dabei ist, dass Sie eine statische Breite für den Container benötigen #slideshowWrapper und der Rest der Lösung ist so, wie die anderen Benutzer sagen

body {
    text-align: center;
}

#slideshowWrapper {
    margin-top: 50px;
    text-align:center;
    width: 500px;
}

ul#slideshow {
    list-style: none;
    position: relative;
    margin: auto;
}

ul#slideshow li {
    position: relative;
    left: 50%;
}

ul#slideshow li img {
    border: 1px solid #ccc;
    padding: 4px;
    height: 450px;
}

http://jsfiddle.net/ejRTU/10/

Beantwortet el 14 de Dezember, 2011 von eveevans (4312 Punkte )

Answer 3

4voto

RICHARD ABRAHAM Punkte 1700

Verwenden Sie einfach display: flex y justify-content: center auf das übergeordnete Element

body {
    text-align: center;
}

#slideshowWrapper {
    margin-top: 50px;
    text-align: center;
}

ul#slideshow {
    list-style: none;
    position: relative;
    margin: auto;
    display: flex;
    justify-content: center;
}

ul#slideshow li {
    position: absolute;
}

ul#slideshow li img {
    border: 1px solid #ccc;
    padding: 4px;
    height: 100px;
}

<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>

<!-- Images from Unsplash-->

Diese Lösung finden Sie unter JSFIDDLE

Beantwortet el 26 de August, 2020 von RICHARD ABRAHAM (1700 Punkte )

Answer 4

3voto

tuancharlie Punkte 121

Meine bevorzugte Methode zur absoluten Zentrierung eines Elements oder einer Gruppe von Elementen ist die absolute Positionierung ihres Containers, die Höhe und Breite des relativen Containers, dann verwenden Sie Flex, um die Elemente innerhalb auszurichten.

In diesem speziellen Fall:

body {
  position: relative; /* OPTIONAL */
}

#slideshowWrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row; /* OPTIONAL IF ONLY ONE ELEMENT */
  justify-content: center;
  align-items: center;
}

Ich hoffe, das hilft, danke.

Beantwortet el 25 de Kann, 2021 von tuancharlie (121 Punkte )

Answer 5

3voto

Chirag Dave Punkte 179

Sie können es so versuchen:

* { margin: 0px; padding: 0px; }
#body { height: 100vh; width: 100vw; position: relative; 
        text-align: center; 
        background-image: url('https://s-media-cache-ak0.pinimg.com/originals/96/2d/ff/962dff2247ad680c542622e20f44a645.jpg'); 
         background-size: cover; background-repeat: no-repeat; }
.text { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height:100px; 
        display: inline-block; margin: auto; z-index: 999999; }

<html>
<body>
    <div id="body" class="container-fluid">
      <!--Background-->
        <!--Text-->
          <div class="text">
            <p>Random</p>
          </div>      
    </div>
</body>
</html>

Beantwortet el 5 de Januar, 2018 von Chirag Dave (179 Punkte )

Answer 6

3voto

hustnzj Punkte 185

Für diesen Fall ist der nachstehende Code meiner Meinung nach ausreichend:

    ul#slideshow li {
      position: absolute;
      left: 0;
      right: 0;
    }

Beantwortet el 4 de September, 2021 von hustnzj (185 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: