Centrado DIV con IE

Estoy tratando de centrar un DIV, con "margin:auto". Funciona bien con Chrome y FF, pero el siguiente código no se centra el DIV con IE:Centrado DIV con IE

CSS

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

HTML

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

¿Qué estoy haciendo mal?

Gracias,

Joel

Editar (HTML/CSS código):

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

Fuente

2010-10-21 Joel

¿Qué versión de IE has probado este código con? Normalmente defino un 'ancho' y luego establezco' margin: 0 auto' y funciona bien incluso en IE ... –

¡Probé probándolo con IE9! El código que utilicé arriba ... – Joel

Cierto, pero como dijo Sime use margin: 0 auto; Solo tiene margen: auto – Rob

probar este;

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

Fuente

2010-10-21 13:48:54 Rob

Usando margin: 0 auto; no hace una pizca de diferencia – Alex

@Alex Tenga cuidado, no me sorprendería si este cambio hiciera la diferencia en IE. IE tiene muchos errores extraños –

Confía en mí, no lo es. Es porque el póster probablemente no tiene un doctype válido. ¡Aunque entiendo de dónde vienes al tratar con muchos errores de IE en mi tiempo! – Alex

Esto debería ayudar a salir:

body { 
    text-align: center; 
} 

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

No haces nada mal, IE6: ignora "margen: auto;"

Fuente

2010-10-21 13:50:29 Thomas

Este método no ha sido requerido desde IE5.5, creo. Los márgenes automáticos siempre han funcionado en IE ... es solo cuestión de asegurarse de que el navegador no esté procesando en el modo Quirks. – Alex

IE9? quizás la próxima vez tienes que decir que estás hablando de IE9. – Thomas

IE9 beta para ser precisos ... –

Insertar esta en la parte superior del documento:

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

o para html5:

<!DOCTYPE html>

Reference for document type declaration

Fuente

2011-07-05 11:20:48

Margen auto centrado

Problema: Cuando centrado div etiquetas via el margen izquierdo: automático; o margen-derecha: auto; ajustes, esto no va a funcionar en el explorador de Internet a menos que añadir lo siguiente a la hoja de estilos para el cuerpo html:

html, body { 
text-align: center; 
}

No se olvide de añadir ahora esto a sus párrafos y encabezados como el ajuste anterior ahora harán estos también se centran.

p {text-align: left;}

Fuente

2011-08-15 20:35:02

Usted debe poner & atributos Izquierda Derecha allí también:

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

Fuente

2013-04-08 16:22:50 dougczar

debe hacer referencia al tipo de documento según lo mencionado por '2astalavista'

De lo contrario

1.Center usando Posicionamiento y margen negativo si es un ancho conocido

<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.Usar la outercontainer y alineación del texto de centro a centro del 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>

Fuente

2014-03-25 12:28:46 askthebigo

Ésta funcionó para mí:

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

Fuente

2017-01-10 09:47:39

Respuesta

Cuestiones relacionadas