wake-up-neo.net

So zentrieren Sie ein "position: absolute" -Element

Ich habe ein Problem beim Zentrieren eines Elements, dessen Attribut position auf absolute gesetzt ist. 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>
591
user1098278
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
1045
baaroz

Ohne zu wissen, die width/height der positioniert1 Es ist weiterhin möglich, das Element wie folgt auszurichten:

BEISPIEL HIER

.child {
    position: absolute;
    top: 50%;  /* position the top  Edge of the element at the middle of the parent */
    left: 50%; /* position the left Edge of the element at the middle of the parent */

    transform: translate(-50%, -50%); /* This is a shorthand of
                                         translateX(-50%) and translateY(-50%) */
}

Es ist erwähnenswert, dass CSS-Transformationwird in IE9 und höher unterstützt . (Anbieterpräfixe der Kürze halber weggelassen)


Erläuterung

Durch Hinzufügen von top / left von 50% wird der obere/linke Rand des Elements in die Mitte des übergeordneten Elements verschoben, und translate() Funktion mit dem (negativen) Wert von -50% verschiebt das Element um die Hälfte seiner Größe. Daher wird das Element in der Mitte positioniert.

Dies liegt daran, dass ein Prozentwert für top / left Eigenschaften relativ zur Höhe/Breite des übergeordneten Elements (das einen enthaltenden Block erstellt) ist.

Ein Prozentwert für translate()transform bezieht sich zwar auf die Breite/Höhe des Elements selbst (tatsächlich bezieht er sich auf die Größe von Begrenzungsrahmen ) .

Verwenden Sie für eine unidirektionale Ausrichtung stattdessen translateX(-50%) oder translateY(-50%).


1. Ein Element mit einem anderen position als static. Das heißt relative, absolute, fixed Werte.

507
Hashem Qolami

Etwas absolutemäßig positioniertes zu zentrieren, ist in CSS ziemlich verworren.

ul#slideshow li {
    position: absolute;
    left:50%;
    margin-left:-20px;

}

Ändern Sie margin-left in die (negative) Hälfte der Breite des Elements, das Sie zentrieren möchten.

176
bookcasey

Div vertikal und horizontal ausgerichtetes Zentrum

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

Hinweis: Elemente sollten Breite und Höhe haben, die eingestellt werden sollen

78
Sebin Simon

Ein einfacher CSS-Trick:

width: 100%;
text-align: center;

Dies funktioniert sowohl mit Bildern als auch mit Text.

51
cutez7boyz

Wenn Sie ein absolutes Element zentrieren möchten

#div {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    width:300px; /* Assign a value */
    height:500px; /* Assign a value */
    margin:auto;
}

Wenn ein Container von links nach rechts zentriert werden soll, jedoch nicht von oben nach unten

#div {
    position:absolute;
    left:0;
    right:0;
    width:300px; /* Assign a value */
    height:500px; /* Assign a value */
    margin:auto;
}

Wenn ein Container von oben nach unten zentriert werden soll, unabhängig davon, ob er von links nach rechts ausgerichtet ist

#div {
    position:absolute;
    top:0;
    bottom:0;
    width:300px; /* Assign a value */
    height:500px; /* Assign a value */
    margin:auto;
}

Stand 15. Dezember 2015

Nun, ich habe das vor ein paar Monaten gelernt. Angenommen, Sie haben ein relatives übergeordnetes Element.

Hier geht Ihr absolutes Element.

.absolute-element { 
    position:absolute; 
    top:50%; 
    left:50%; 
    transform:translate(-50%, -50%); 
    width:50%; /* You can specify ANY width values here */ 
}

Ich denke, das ist eine bessere Antwort als meine alte Lösung. Da müssen Sie nicht Breite UND Höhe angeben. Dieser passt den Inhalt des Elements selbst an.

44

Das hat bei mir funktioniert:

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

um ein position: absolute Attribut zu zentrieren, müssen Sie left: 50% und margin-left: -50% der Breite des div setzen.

<!-- for horizontal -->
<style>
div.center{
 width:200px;
 left:50%;
 margin-left:-100px;
 position:absolute;
}
</style>


<body>
 <div class='center'>
  should be centered horizontaly
 </div>
</body>

für die vertikale Mitte absolut müssen Sie dasselbe tun, nicht mit left, sondern nur mit top. (HINWEIS: html und body müssen mindestens 100% groß sein;)

<!-- for vertical -->
<style>
 body,html{
  min-height:100%;
 }
 div.center{
  height:200px;
  top:50%;
  margin-top:-100px;
  position:absolute;
 }
</style>

<body>
 <div class='center'>
  should be centered verticaly
 </div>
</body>

und kann für beide kombiniert werden

   <!-- for both -->
 <style>
 body,html{
  min-height:100%;
 }
 div.center{
  width:200px;
  height:50px
  left:50%;
  top:50%;
  margin-left:-100px;
  margin-top:-25px;
  position:absolute;
 }
</style>


<body>
 <div class='center'>
  should be centered
 </div>
</body>
25
Rednas

So zentrieren Sie ein "position: absolute" -Element.

.your-element {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center; // or this ->  margin: 0 auto;
}
25
Vadamadafaka
    <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 einem position: absolute -Element, wenn left: 0; right: 0; hinzugefügt wird

16
Mohammad Dayeh

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 wie folgt in ein Tag einfügen, das position: relative -Eigenschaft enthält:

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

Wenn Sie die Breite des Elements nicht kennen, können Sie diesen Code verwenden:

<body>
<div style="position: absolute; left: 50%;">
    <div style="position: relative; left: -50%; border: dotted red 1px;">
        I am some centered shrink-to-fit content! <br />
        tum te tum
    </div>
</div>

Demo bei Fiddle: http://jsfiddle.net/wrh7a21r/

Quelle: https://stackoverflow.com/a/1777282/1136132

7
joseantgv

wahrscheinlich die kürzeste

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

enter image description here

Ich bin mir nicht sicher, was Sie erreichen möchten, aber in diesem Fall reicht es aus, width: 100%; zu Ihrem ul#slideshow li hinzuzufügen.

Erläuterung

Die Tags img sind Inline-Block-Elemente. Das heißt, sie fließen inline wie Text, haben aber auch eine Breite und Höhe wie Blockelemente. In Ihrem CSS gibt es zwei text-align: center; Regeln, die auf den <body> und den #slideshowWrapper (die übrigens redundant sind) angewendet werden. Dadurch werden alle untergeordneten Inline- und Inline-Block-Elemente so zentriert, dass sie am nächsten kommen Blockelemente, in Ihrem Code sind dies li Tags. Alle Blockelemente haben width: 100%, wenn es sich um den statischen Fluss handelt (position: static;). Dies ist die Standardeinstellung. Das Problem ist, dass wenn Sie li -Tags als position: absolute; kennzeichnen, Sie sie aus dem normalen statischen Fluss entfernen, und dies dazu führt, dass sie ihre Größe verkleinern, um nur ihrem inneren Inhalt zu entsprechen, mit anderen Worten, sie sind nett von "verlieren" ihre width: 100% Eigenschaft.

5

Die Verwendung von left: calc(50% - Wpx/2);, wobei W die Breite des Elements ist, funktioniert für mich.

5
Julix

Ihre Bilder sind nicht zentriert, weil Ihre Listenelemente nicht zentriert sind; nur ihr Text ist zentriert. Sie können die gewünschte Position erreichen, indem Sie entweder die gesamte Liste zentrieren oder die Bilder in der Liste zentrieren.

Eine überarbeitete Version Ihres Codes finden Sie unten. In meiner Revision zentriere ich sowohl die Liste als auch die Bilder darin.

Die Wahrheit ist, dass Sie nicht ein Element zentrieren, dessen Position auf absolut gesetzt ist.

Aber dieses Verhalten kann nachgeahmt werden!

Hinweis: Diese Anweisungen funktionieren mit jedem DOM-Blockelement, nicht nur mit Abb.

  1. Umgeben Sie Ihr Bild mit einem div oder einem anderen Tag (in Ihrem Fall einem li).

    <div class="absolute-div">
      <img alt="my-image" src="#">
    </div>
    

    Anmerkung: Die Namen, die diesen Elementen gegeben werden, sind nicht speziell.

  2. Ändern Sie Ihre CSS oder SCSS, um die absolute Positionierung des Div und die Bildzentrierung zu erhalten.

    .absolute-div {
      position: absolute;
    
      width: 100%; 
      // Range to be centered over. 
    
      // If this element's parent is the body then 100% = the window's width
    
      // Note: You can apply additional top/bottom and left/right attributes
      // i.e. - top: 200px; left: 200px;
    
      // Test for desired positioning.
    }
    
    .absolute-div img {
      width: 500px;
      // Note: Setting a width is crucial for margin: auto to work.
    
      margin: 0 auto;
    }
    

Und da hast du es! Ihr Bild sollte zentriert sein!

Dein Code:

Probieren Sie dies aus:

body
{
  text-align : center;
}

#slideshow
{
  list-style : none;
  width      : 800px;
  // alter to taste

  margin     : 50px auto 0;
}

#slideshow li
{
  position : absolute;
}

#slideshow img
{
  border  : 1px solid #CCC;
  padding : 4px;
  height  : 500px;
  width   : auto;
  // This sets the width relative to your set height.

  // Setting a width is required for the margin auto attribute below. 

  margin  : 0 auto;
}
<ul id="slideshow">
    <li><img src="http://lorempixel.com/500/500/nature/" alt="Dummy 1" /></li>
    <li><img src="http://lorempixel.com/500/500/nature/" alt="Dummy 2" /></li>
</ul>

Ich hoffe das war hilfreich. Viel Glück!

4
D3RPZ1LLA

Ein absolutes Objekt in einem relativen Objekt ist relativ zu seinem übergeordneten Objekt. Das Problem besteht darin, dass Sie eine statische Breite für den Container #slideshowWrapper benötigen. Der Rest der Lösung entspricht den Aussagen der anderen Benutzer

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/

3
eveevans

Hier ist die einfache und beste Lösung für das Mittelelement mit „Position: Absolut“.

 body,html{
  min-height:100%;
 }
 
 div.center{
 width:200px;
 left:50%;
 margin-left:-100px;/*this is 50% value for width of the element*/
 position:absolute;
 background:#ddd;
 border:1px solid #999;
 height:100px;
 text-align:center
 }
 
 
<style>

</style>

<body>
 <div class='center'>
  should be centered verticaly
 </div>
</body>
3
SantoshK
#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 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 benutze, verhält sich das Bild wie ein Hintergrundbild mit den folgenden Einstellungen:

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

Weitere Details zum ersten Beispiel finden Sie hier:
Beibehalten des Seitenverhältnisses eines Div mit CSS

1
Marian07

Die absolute Position nimmt es aus dem Flow und platziert es bei 0x0 an der übergeordneten Position (Letztes Blockelement, das eine absolute oder relative Position hat).

Ich bin mir nicht sicher, was genau du versuchst zu erreichen. Es könnte am besten sein, das li auf position:relative zu setzen, und das wird sie zentrieren. In Anbetracht Ihres aktuellen CSS

Check out http://jsfiddle.net/rtgibbons/ejRTU/ um damit zu spielen

1
Ryan Gibbons

Sie können es folgendermaßen 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>
1
Chirag Dave

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

Was zu passieren scheint, ist, dass es zwei Lösungen gibt; Mit Rändern zentriert und mit Position zentriert. Beide funktionieren einwandfrei, aber wenn Sie ein Element relativ zu diesem zentrierten Element absolut positionieren möchten, müssen Sie die absolute Positionsmethode verwenden, da die absolute Position des zweiten Elements standardmäßig dem ersten übergeordneten Element entspricht, das positioniert ist. Wie 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 Methode margin: 0 auto eine gleich breite Spalte rechts davon erstellen, um das auszugleichen. Nicht hübsch. Vielen Dank!

0
Deane Nettles