Centering DIV con IE

Sto provando a centrare un DIV, con "margin:auto". Funziona bene con Chrome e FF, ma il seguente codice non centrare il div con IE:Centering DIV con IE

CSS

#container { 
margin:auto; 
width:950px; 
height:50px; 
background:#000; 
}

HTML

<div id="container"></div>

Che cosa sto facendo di sbagliato?

Grazie,

Joel

Modifica (completo di codice HTML/CSS):

<html> 
<head> 
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css"> 
<style> 

#container { 
margin: 0 auto; 
width:950px; 
height:50px; 
background:#000; 
} 
</style> 
</head> 
<body> 
<div id="container"></div> 
</body> 
</html>

fonte

2010-10-21 Joel

Quale versione di IE hai testato questo codice con? Normalmente definisco un 'width' e poi settaggio' margin: 0 auto' e funziona bene anche in IE ... –

Provato con IE9! Il codice che ho usato sopra ... – Joel

Vero, ma come disse Sime usa il margine: 0 auto; Hai solo margine: auto – Rob

Prova questa;

#container { 
margin:0 auto; 
width:950px; 
height:50px; 
background:#000; 
}

fonte

2010-10-21 13:48:54 Rob

Utilizzo del margine: 0 auto; non fa un briciolo di differenza – Alex

@Alex Fai attenzione, non sarei sorpreso se questo cambiamento farebbe la differenza in IE. IE ha molti bug strani –

Fidati di me, non lo è. È perché il poster molto probabilmente non ha un doctype valido. Anche se capisco da dove vieni da aver affrontato un sacco di bug di IE nel mio tempo! – Alex

Questo dovrebbe aiutare a uscire:

body { 
    text-align: center; 
} 

#container { 
    text-align: left; 
    margin:auto; 
    width:950px; 
    height:50px; 
    background:#000; 
}

Tu fai nulla di male, IE6 fa: ignora "margin: auto;"

fonte

2010-10-21 13:50:29 Thomas

Questo metodo non è stato richiesto da quando IE5.5 credo. I margini automatici hanno sempre funzionato in IE ... è solo un caso di assicurarsi che il browser non venga visualizzato in modalità Quirks. – Alex

IE9? forse la prossima volta devi dire che stai parlando di IE9. – Thomas

IE9 beta per la precisione ... –

Inserire questo nella parte superiore del documento:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

o per html5:

<!DOCTYPE html>

Reference for document type declaration

fonte

2011-07-05 11:20:48

Margine auto centratura

Problema: quando centraggio div tag via o il margine sinistro: auto; o margin-right: auto; impostazioni, questo non funzionerà in Internet Explorer se non si aggiunge quanto segue al foglio di stile per il corpo HTML:

html, body { 
text-align: center; 
}

Non dimenticate di aggiungere ora questo per i paragrafi e le intestazioni come impostazione di cui sopra sarà ora causa questi anche al centro.

p {text-align: left;}

fonte

2011-08-15 20:35:02

Si dovrebbe mettere a destra & attributi di sinistra in là anche:

#container 
{ 
    right: 0px; 
    left: 0px; 
    margin: 0px auto; 
    width: 950px; 
}

fonte

2013-04-08 16:22:50 dougczar

è necessario fare riferimento alla DOCTYPE come detto da '2astalavista'

Altrimenti

1.Center utilizzando posizionamento e margine negativo se è una larghezza nota

<html> 
<head> 
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css"> 
<style> 


#container { 
position: relative; 
left: 50%; 
margin: 0 0 0 -475px; /* negative margin of half the width */ 
width:950px; 
height:50px; 
background:#000; 
} 

</style> 
</head> 
<body> 
<div id="container"></div> 
</body> 
</html>

2.Utilizzare il centro outercontainer e text-align per centrare l'elemento:

<html> 
<head> 
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css"> 
<style> 

#outerContainer{ 
text-align: center; 
} 

#container { 
margin: 0 auto; 
width:950px; 
height:50px; 
background:#000; 
} 
</style> 
</head> 
<body> 
<div id="outerContainer"> 
     <div id="container"></div> 
</div> 
</body> 
</html>

fonte

2014-03-25 12:28:46 askthebigo

Questo ha funzionato per me:

#container { 
    width: 80%; /* or the width of the object inside the container */ 
    margin-left: auto; 
    margin-right: auto; 
}

fonte

2017-01-10 09:47:39

Centering DIV con IE

risposta

Problemi correlati