Por que essa div/img não centrará no IE8?

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

  •  03-07-2019
  •  | 
  •  

Pergunta

Eu tenho uma página de espera muito simples que construí centralizando uma div, âncora e imagem. Por alguma razão, ele não se concentrará no IE8 (nenhum dos modos), e espero que alguém possa me dizer o porquê. Não tive a chance de experimentar em outros navegadores do IE. Eu tentei isso no Chrome e FF3, onde funciona bem.

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

Eu disse que era muito simples. :)

Obrigada,

Brett

Foi útil?

Solução

Você realmente quer que sua página funcione no modo Quirks? Seus centros HTML são multa quando eu adicionei o Doctype ao modo de padrões para forçar:

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

Outras dicas

A margem de auto Nas laterais da div, deixe o navegador decidir para onde vai. Não há nada dizendo ao navegador que a div deve ser centrada no corpo, ou esquerda ou direita alinhada. Então, cabe ao navegador. Se você adicionar uma diretiva ao corpo, seu problema será resolvido.

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

Eu adicionei uma borda de 1px à div para que você pudesse ver o que estava acontecendo com mais clareza.

Você está deixando para o navegador porque está no modo Quirks. Para remover o modo Quirks, adicione uma definição Doctype ao topo, assim:

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

Agora você poderá ver seu Centro Div 300 PX na página.

Adicionar text-align:center para o corpo. Isso deve fazê -lo quando combinado com o margin:0 auto na div.

Você pode centrar -se sem usar o text-align:center no corpo, envolvendo o conteúdo inteiro da página em um contêiner de largura total e depois configurando text-align:center nisso também.

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

(Eu adicionei o container div). Mas realmente não muda nada ... apenas uma div. Você ainda precisa das mesmas propriedades CSS.

Você provavelmente quer alterá -lo para o seguinte:

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

o text-align:center; é movido para o corpo. Se você quiser colocar outro conteúdo esquerdo alinhado dentro da div dentro #pageContainer, então você precisará text-align:left; Para essa aula. Esta é a solução que eu usei em alguns sites agora e parece funcionar em todos os navegadores (é o que o Dreamweaver usa em seus modelos iniciantes).

Para os usuários do Blueprint, isso levou minhas nozes, até que eu encontrei este post: Problema com IE8 e BlueprintPara encurtar a história, em seu código html altere o 

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

por

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

Atenciosamente Alex

Isso funciona para mim no IE6,7,8, FF 3.6.3:

    #container
    {
        width:100%;
    }

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

e

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

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top