So zentrieren Sie ein Element "position: absolute" in IE 9,10,11

So zentrieren Sie ein Element "position: absolute" in IE 9, 10, 11, mein Beispiel funktioniert nicht im Internet Explorer. Auch diese "Position: absolut; links: 50%; Rand links: -20px;" , die Art und Weise wird mir nicht passen, da das Layout reagiert.So zentrieren Sie ein Element "position: absolute" in IE 9,10,11

.box{ 
    position: absolute; 
    top: 150px; 
    right: 0; 
    left: 0; 
    margin: auto;  
} 

<body> 
<div class="container"> 
<div class="box"> 
</div> 
</div> 
</body>

Quelle

2014-03-26 user3351236

Html-Code bitte, und Geige wenn möglich –

Bearbeitete die Frage! – user3351236

zentrieren Sie das div in der Seite .. Überprüfen Sie den Link. http://jsfiddle.net/mBBJM/1/ –

<body> 
<div class="container"> 
<div class="box"> 
</div> 
</div> 
</body>

CSS

.box{ 
    position: absolute; 
    top:0; 
    right: 0; 
    left: 0; 
    bottom:0; //specify all including bottom:0 
    margin: auto; 
    height:200px; 
    width:200px;  
}

DEMO

Quelle

2014-03-26 07:54:18

+21

Funktioniert nicht mit max-width, benötigt eine feste Breite. –

Hinzufügung der Unterseite arbeitete für mich !! – zuke

@zuke: das ist schön :) –

Es funktioniert hier Jsfiddle

.box{ 
position: absolute; 
top: 150px; 
right: 0; 
left: 0; 
margin: auto; 
border: 2px solid red;  
width: 50px; 
height: 50px; 
}

Quelle

2014-03-26 07:55:43 Selvamani

Gib ihm einfach eine feste Breite und Höhe und entferne oben: 150px

Quelle

2014-03-26 08:01:24

Sie können Breite und Höhe mit 100% hinzufügen, wenn Sie keine bestimmte Größe haben. Funktioniert auch in IE. – sircrom

@sircrom Wow ich habe Stunden damit verbracht, dieses Thema zu googeln, hätte nie gedacht, dass es so einfach zu beheben wäre! – camdenl

Ich habe gerade mit diesem selbst gekämpft, und der spezifische Schlüssel für mich war die max-width Eigenschaft zu ändern, um eine width Eigenschaft zu sein. Hinzufügen einer maximalen Breite bricht es nicht, aber es beruht auf der width -Eigenschaft in IE, wo anscheinend in Firefox es nur mit der maximalen Breite funktioniert.

Ich hoffe, das hilft jemand anderem!

Quelle

2015-09-17 15:24:52 SeanKendle

Oh, ich habe gerade Dominiques Kommentar gesehen! Oh! – SeanKendle

Arbeitete perfekt! Vielen Dank! –

Sie sollten keine untere Eigenschaft (even in IE) festlegen müssen, um dieses Element horizontal zu zentrieren.

Wenn Sie jedoch das Element vertikal zentrieren möchten, benötigen Sie die Eigenschaft bottom in Verbindung mit einem automatischen Rand für den oberen und unteren Rand.

Wenn Ihr Element nur horizontal zentriert wird, wenn "bottom" auf 0 gesetzt ist, besteht ein Konflikt mit Ihrem Code, der Sie zwingt, diese Eigenschaft zu verwenden. Ich habe gesehen, dass dies vorher in Bootstraps Ecosystem geschehen ist, wenn nicht die richtige Hierarchie von Container -> Zeile und so weiter angewendet wird.

Quelle

2016-02-11 18:56:04 TrevorGee4

So zentrieren Sie ein Element "position: absolute" in IE 9,10,11

Antwort

Verwandte Themen