918 Stimmen

user1098278 avatar

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

Gefragt el 14 de Dezember, 2011
Wann wurde die Frage gestellt
1271223 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

Antworten

Zu viele Anzeigen?

3voto

Ammad Amir avatar
Ammad Amir Punkte 425

1- wenn Sie die Breite des absolut positionierten Elements kennen.

width: 200px;
position: absolute;
left: 50%;
margin-left: -100px

2- wenn Sie die Breite des absolut positionierten Elements nicht kennen. Hervorragend für die Reaktionsfähigkeit, aber ist CSS3 älteren Browsern kann ein Problem haben.

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

3- wenn Sie die Breite des absolut positionierten Elements nicht kennen, es aber zu 100% der Breite des übergeordneten Elements machen, was möglicherweise nicht zum Design passt.

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

Wenn Sie die Breite kennen, können Sie auch die dritte Option verwenden, und es wird zentriert.

Beantwortet el 16 de April, 2021 von Ammad Amir (425 Punkte )

2voto

Marian07 avatar
Marian07 Punkte 1874 
#parent
{
    position : relative;
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25% /* images with aspect ratio: 16:9  */
}

img 
{
    height: auto!important;
    width: auto!important;
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    display: block;
    /*  */
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;
}

Ich weiß nicht mehr, wo ich die oben genannte Zentriermethode 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:

background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;

Weitere Einzelheiten über das erste Beispiel finden Sie hier:
Beibehaltung des Seitenverhältnisses eines Divs mit CSS

Beantwortet el 25 de Januar, 2016 von Marian07 (1874 Punkte )

1voto

antelove avatar
antelove Punkte 2552 
html, body, ul, li, img {
  box-sizing: border-box;
  margin: 0px;  
  padding: 0px;  
}

#slideshowWrapper {
  width: 25rem;
  height: auto;
  position: relative;

  margin-top: 50px;
  border: 3px solid black;
}

ul {
  list-style: none;
  border: 3px solid blue;  
}

li {
  /* center horizontal */
  position: relative;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  font-size: 18px;
  /* center horizontal */

  border: 3px solid red; 
}

img {
  border: 1px solid #ccc;
  padding: 4px;
  //width: 200px;
  height: 100px;
}

<body>
  <div id="slideshowWrapper">
    <ul id="slideshow">
      <li><img src="http://via.placeholder.com/350x150" alt="Dummy 1" /></li>
      <li><img src="http://via.placeholder.com/140x100" alt="Dummy 2" /></li>
      <li><img src="http://via.placeholder.com/200x100" alt="Dummy 3" /></li>      
    </ul>
  </div>
</body>
Beantwortet el 27 de September, 2017 von antelove (2552 Punkte )

1voto

Deane Nettles avatar
Deane Nettles Punkte 21

Es scheint zwei Lösungen zu geben: Zentrierung über Ränder und Zentrierung über Position. Beide funktionieren gut, aber wenn Sie ein Element relativ zu diesem zentrierten Element absolut positionieren möchten, müssen Sie die Methode der absoluten Position verwenden, da die absolute Position des zweiten Elements standardmäßig auf das erste übergeordnete Element, das positioniert ist, festgelegt wird. Zum Beispiel so:

<!-- CENTERED USING MARGIN -->
<div style="width:300px; height:100px; border: 1px solid #000; margin:20px auto; text- align:center;">
    <p style="line-height:4;">width: 300 px; margin: 0 auto</p>
    <div style="position:absolute; width:100px; height:100px; background-color:#ff0000; top:-20px; left:0px;">
        <p style="line-height:4;">Absolute</p>
    </div>
</div>

<!-- CENTERED USING POSITION -->
<div style="position:absolute; left:50%; width:300px; height:100px; border: 1px solid #000; margin:20px 0 20px -150px; text-align:center;">
    <p style="line-height:2;">width:300px; position: absolute; left: 50%; margin-left:-150px;</p>
    <div style="position:absolute; width:100px; height:100px; background-color:#ff0000; top:0px; left:-105px;">
        <p style="line-height:4;">Absolute</p>
    </div>
</div>

Bis ich diesen Beitrag gelesen hatte, musste ich, um ein Menü links von meinem Inhalt zu erstellen, mit der Technik margin:0 auto eine Spalte gleicher Breite auf der rechten Seite erstellen, um sie auszugleichen. Nicht schön. Vielen Dank!

Beantwortet el 24 de August, 2014 von Deane Nettles (21 Punkte )

1voto

Bibaswann Bandyopadhyay avatar
Bibaswann Bandyopadhyay Punkte 3311

Utilisez margin-left: x%; wobei x die Hälfte der Breite des Elements ist.

Beantwortet el 11 de Juli, 2013 von Bibaswann Bandyopadhyay (3311 Punkte )

Verwandte Fragen

Empfohlene Fragen

Top-Tags

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:

Yandex
X