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

StackOverflow https://stackoverflow.com/questions/816343

  •  03-07-2019
  •  | 
  •  

Pregunta

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

<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 muy simple. :)

Gracias,

Brett

¿Fue útil?

Solución

¿Realmente quieres que tu página funcione en modo peculiar? Su HTML se centra bien una vez que agregué doctype para forzar el modo estándar: 

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

Otros consejos

El margen de auto en los lados del div deja que el navegador decida a dónde va. No hay nada que le diga al navegador que el div debe estar centrado en el cuerpo, o alineado a la izquierda o derecha. Así que depende del navegador. Si agrega una directiva al cuerpo, su problema se resolverá. 

<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 pudieras ver lo que sucedía más claramente.

Lo dejas en manos del navegador porque está en modo peculiar. Para eliminar el modo de peculiaridades, agregue una definición de doctype en 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 podrá ver su centro div de 300 px en la página.

Agrega text-align: center al cuerpo. Eso debería hacerlo cuando se combina con el margen: 0 auto en la división.

Puede centrar sin usar text-align: center en el cuerpo envolviendo todo el contenido de la página en un contenedor de ancho completo & amp; luego configurando 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>

(agregué el container div). Sin embargo, en realidad no cambia nada ... solo un div extra. Aún necesita las mismas propiedades CSS.

Probablemente quieras cambiarlo a lo 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 izquierdo alineado dentro del div #pageContainer , necesitará text-align: left; para esa clase. Esta es la solución que he usado en bastantes sitios web ahora y parece funcionar en todos los navegadores (es lo que Dreamweaver usa en sus plantillas de inicio).

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

    #container
    {
        width:100%;
    }

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

y 

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

No afiliado a StackOverflow
scroll top