¿Por qué este div/img no se centrará en IE8?

Tengo una página de espera muy simple que construí centrando un div, anclaje e imagen. Por alguna razón, no se centrará en IE8 (cualquiera de los modos), y espero que alguien me puede decir por qué. No he tenido la oportunidad de probarlo en otros navegadores IE. He intentado esto en Chrome y FF3 donde funciona bien.¿Por qué este div/img no se centrará en IE8?

<html> 
<head> 
<title>Welcome</title> 
<style> 
    #pageContainer {width:300px;margin:0 auto;text-align:center;} 
    #toLogo{border:none; } 
</style> 
</head> 
<body> 
    <div id="pageContainer"> 
    <a href="http://portal.thesit.com" id="toSite"><img src="LOGO_DNNsmall.png" id="toLogo"></a> 
    </div> 
</body> 
</html>

Dije que era realmente simple. :)

Gracias,

Brett

Fuente

2009-05-03 Brettski

todos modos no tiene nada que ver con la versión de IE. Funciona igual en todos los IE-s – DaDa

es mejor usar doctype, la mitad de los errores serán corregidos – Mike

¿Realmente quieres que tu página funcione en modo peculiar?Su HTML centra bien una vez añadí tipo de documento para forzar el modo estándares:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 

<head> 
<title>Welcome</title> 
<style>  
    #pageContainer {width:300px;margin:0 auto;text-align:center;}  
    #toLogo{border:none; } 
</style> 
</head> 

<body> 

<div id="pageContainer"> 
    <a href="http://portal.thesit.com" id="toSite"> 
    <img src="http://stackoverflow.com/content/img/so/logo.png" id="toLogo"></a> </div> 

</body> 
</html>

Fuente

2009-05-03 05:16:09

buit-oxa, una respuesta muy interesante de hecho. Gracias. – Brettski

Doctype> modo peculiar, cualquier día. El modo peculiar puede diferir de un navegador a otro, mientras que el modo estándar es prácticamente el mismo (¡sí, IE8 cumple con los estándares!) Excepto algunas pequeñas diferencias. +1 –

Honestamente nunca escuché sobre el modo peculiar antes, muchas gracias por la respuesta y para enseñarme un poco más sobre mi oficio. – Brettski

Añadir text-align:center al cuerpo. Eso debería hacerlo cuando se combina con margin:0 auto en div.

Puede centrar sin utilizar el text-align:center en el cuerpo envolviendo todo el contenido de la página en un recipiente ancho completo & luego poner text-align:center en eso también.

<html> 
<head> 
<title>Welcome</title> 
<style> 
    #container {text-align:center;border:1px solid blue} 
    #pageContainer {width:300px; margin:0 auto; border:1px solid red} 
    #toLogo{border:none; } 
</style> 
</head> 
<body> 
    <div id="container"> 
     <div id="pageContainer"> 
     <a href="http://portal.thesit.com" id="toSite"><img src="LOGO_DNNsmall.png" id="toLogo"></a> 
     </div> 
    </div> 
</body> 
</html>

(He añadido el container div). En realidad, no cambia nada ... solo un div adicional. Aún necesita todas las mismas propiedades CSS.

Fuente

2009-05-03 04:52:33 Bryan

Eso sí lo centró en IE8, pero no entiendo por qué lo necesito. Tengo otros sitios que usan margin: 0 auto; centrar un div que contiene – Brettski

Hilo viejo, pero le he dado esta respuesta (y TAMBIÉN la comúnmente aceptada) simplemente porque fue esta respuesta en particular la que me recordó poner text-align: center en el cuerpo. ;-) –

es probable que desee cambiar a la siguiente:

<html> 
<head> 
<title>Welcome</title> 
<style> 
    body { text-align: center; } 
    #pageContainer {width:300px;margin:0 auto;} 
    #toLogo{border:none; } 
</style> 
</head> 
<body> 
    <div id="pageContainer"> 
    <a href="http://portal.thesit.com" id="toSite"><img src="LOGO_DNNsmall.png" id="toLogo"></a> 
    </div> 
</body> 
</html>

El text-align:center; se mueve al cuerpo. Si desea colocar otro contenido alineado izquierdo en el div #pageContainer, necesitará text-align:left; para esa clase. Esta es la solución que he utilizado en bastantes sitios web ahora y parece funcionar en todos los navegadores (es lo que Dreamweaver usa en sus plantillas de inicio).

Fuente

2009-05-03 04:56:50

christ sabe por qué alguien votó por ti porque esta es exactamente la forma de centrar una página – wheresrhys

Como IE8 es en realidad compatible con los estándares en este nivel, puedes aplicar los estándares y la separación. La propiedad text-align solo centra los elementos de nivel en línea, y no bloquea los elementos de nivel, como DIV. text-align: center; en este caso, solo se centrará el * texto * dentro del cuerpo, no en los elementos del contenedor. Lo único que necesita es un tipo de documento, como dice la respuesta anterior. –

El margen de auto a los lados del div lo deja en manos del navegador para decidir a dónde va. No hay nada que le indique al navegador que el div debe estar centrado en el cuerpo, o alineado a la izquierda o a la derecha. Entonces depende del navegador. Si agrega una directiva al cuerpo, su problema será resuelto.

<html> 
    <head> 
    <title>Welcome</title> 
    <style> 
     body { text-align: center;} 
     #pageContainer {width:300px; margin:0px auto; 
      text-align:center; border:thin 1px solid;} 
     #toLogo{border:none; } 
    </style> 
    </head> 
    <body> 
    <div id="pageContainer"> 
     <a href="http://portal.thesit.com" id="toSite"> 
     <img src="LOGO_DNNsmall.png" id="toLogo"> 
     </a> 
    </div> 
    </body> 
</html>

Agregué un borde de 1px al div para que pudiera ver lo que estaba pasando más claramente.

Lo dejas al navegador porque está en modo peculiar. Para quitar el modo de peculiaridades, añadir una definición tipo de documento a la parte superior, así:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
    <head> 
    <title>Welcome</title> 
    <style> 
     #pageContainer {width:300px; margin:0px auto; 
      text-align:center; border:thin 1px solid;} 
     #toLogo{border:none; } 
    </style> 
    </head> 
    <body> 
    <div id="pageContainer"> 
     <a href="http://portal.thesit.com" id="toSite"> 
     <img src="LOGO_DNNsmall.png" id="toLogo"> 
     </a> 
    </div> 
    </body> 
</html>

Ahora usted será capaz de ver su 300 px centro div en la página.

Fuente

2009-05-03 05:02:24

Los márgenes horizontales automáticos combinados con un ancho determinado son la forma adecuada de centrar los elementos de nivel de los bloques. Práctica común, pruébelo usted mismo :) –

PARA USUARIOS BLUEPRINT Esto condujo mis frutos secos, hasta que me encontré con este post: problem with ie8 and blueprint Para resumir, en el que el cambio de código html del

<!--[if IE]> 
<link rel="stylesheet" href="../css/blueprint/ie.css" type="text/css" media="screen, projection" /> 
<![endif]-->

para

<!--[if lt IE 8]> 
<link rel="stylesheet" href="../css/blueprint/ie.css" type="text/css" media="screen, projection" /> 
<![endif]-->

Saludos Alex

Fuente

2009-09-11 23:24:26

-1

Esto funciona para mí en IE6,7,8, FF 3.6.3:

#container 
    { 
     width:100%; 
    } 

    #centered 
    { 
     width:350px; 
     margin:0 auto; 
    }

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

Fuente

2010-04-06 16:16:19 ben

No funciona ... – Philippe

¿Por qué este div/img no se centrará en IE8?

Respuesta

Cuestiones relacionadas