web-dev-qa-db-fra.com

Pourquoi ce div / img ne se centre-t-il pas dans IE8?

J'ai une page de tenue très simple que j'ai construite en centrant une div, une ancre et une image. Pour une raison quelconque, il ne sera pas centré sur IE8 (dans les deux modes), et j'espère que quelqu'un pourra me dire pourquoi. Je n'ai pas eu l'occasion de l'essayer dans d'autres navigateurs IE. J'ai essayé cela dans Chrome et FF3 où cela fonctionne 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>

J'ai dit que c'était vraiment simple. :)

Merci,

Brett

htmlcssinternet-explorer-8
33
Brettski

Voulez-vous vraiment que votre page fonctionne en mode bizarre? Votre centre HTML va bien une fois que j'ai ajouté doctype pour forcer le mode standard:

<!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>
70
buti-oxa

La marge de auto sur les côtés du div laisse au navigateur le soin de décider où il va. Rien ne dit au navigateur que le div doit être centré dans le corps ou aligné à gauche ou à droite. C'est donc au navigateur. Si vous ajoutez une directive au corps, votre problème sera résolu.

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

J'ai ajouté une bordure 1px à la div pour que vous puissiez voir ce qui se passait plus clairement.

Vous laissez le soin au navigateur, car il est en mode bizarreries. Pour supprimer le mode excentrique, ajoutez une définition de doctype en haut, comme ceci:

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

Maintenant, vous pourrez voir votre centre div 300 px sur la page.

3
Nathan DeWitt

Ajouter text-align:center au corps. Cela devrait le faire lorsqu'il est combiné avec le margin:0 auto sur la div.

Vous pouvez centrer sans utiliser le text-align:center sur le corps en enveloppant le contenu de la page entière dans un conteneur pleine largeur, puis en définissant text-align:center là-dessus aussi.

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

(J'ai ajouté le container div). Cela ne change rien vraiment ... juste une div supplémentaire. Vous avez toujours besoin des mêmes propriétés css.

2
Bryan

POUR LES UTILISATEURS DE BLUEPRINT Cela a conduit mes noix, jusqu'à ce que je trouve ce post: problème avec ie8 et blueprint Bref, en vous, le code html change le

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

for

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

Cordialement Alex

0
Alex Angelico

Vous souhaiterez probablement le modifier comme suit:

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

Le text-align:center; est déplacé vers le corps. Si vous souhaitez placer un autre contenu gauche aligné dans le div #pageContainer, alors vous aurez besoin de text-align:left; pour cette classe. C'est la solution que j'ai utilisée dans de nombreux sites Web maintenant et semble fonctionner sur tous les navigateurs (c'est ce que Dreamweaver utilise dans ses modèles de démarrage).

0
Darryl Hein