Centrer un div horizontalement avec une largeur variable ne fonctionnant pas dans IE

Je m'entraînais à centrer un div sans largeur et trouvé une solution qui fonctionne dans tous les navigateurs courants. Mais quand je mets cette solution dans le vrai style de page, il ne fonctionnera pas dans IE.Centrer un div horizontalement avec une largeur variable ne fonctionnant pas dans IE

La solution pratique, qui fonctionne parfaitement dans IE, Chrome et Firefox, ressemble à ceci:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
    <title>Centerbox</title> 
    <link type="text/css" rel="stylesheet" href="centerbox.css" media="all" /> 
</head> 

<body> 
    <div class="centerbox-outer"> 
     <div class="centerbox-inner"> 
      <p>Sample content that is not fixed width</p> 
      <p>Some more content</p> 
      <form> 
       <input type="text" name="sampleinput" /> 
       <input type="submit" name="go" /> 
      </form> 
     </div> 
    </div> 
</body> 
</html>

centerbox.css

div.centerbox-outer{ 
    text-align: center; 
    margin: 0 auto; 
} 

div.centerbox-inner{ 
    text-align: justify; 
    background-color: gray; 
    display: inline-block; 
}

La page où il ne fonctionne pas avec IE est ici : [link removed]

Est-ce que quelqu'un a une idée, qu'est-ce qui me manque ici?

Source

2010-07-08 kaupov

Quelle version de IE fonctionne? Et qui ne l'est pas? IE6 ne fonctionne pas, et IE7 non plus. Dans les deux cas, la case grise (dans l'exemple) correspond à la largeur totale de la fenêtre. –

J'ai essayé avec IE8, je n'ai pas essayé avec les plus anciens, mais vous m'avez donné un bon indice. J'utilise pour la page, c'est pourquoi c'est différent. Mais comment puis-je résoudre ce problème dans IE7 en utilisant CSS? – kaupov

A fait quelques recherches et trouvé une solution appropriée en utilisant des positions relatives. Cela semble fonctionner parfaitement dans les navigateurs couramment utilisés.

Le style serait suit:

div.centerbox-outer{ 
    margin: 0 auto; 
    float: left; 
    left: 50%; 
    position: relative; 
} 

div.centerbox-inner{ 
    text-align: justify; 
    background-color: gray; 
    float: left; 
    position: relative; 
    right: 50%; 
}

Source

2010-07-08 19:57:23 kaupov

Cela ne semble pas fonctionner dans FF 10.0.2 (linux) Fonctionne en chrome si – Doug

Pour centrer une div, utilisez:

margin-left: auto; 
margin-right: auto;

dans le css pour la div. En outre, j'ai trouvé pour IE, vous devrez peut-être modifier votre DocType à une spécification HTML 4. Quelque chose comme:

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

Je fais cela dans mes pages, et ils se centrent parfaitement dans IE.

Source

2010-07-08 18:41:41 GrandmasterB

div.centerbox-outer est 100% de largeur, donc mettre margin: 0 auto; dessus n'a aucun sens. Si quelque chose, vous devriez mettre margin: 0 auto; sur div.centerbox-inner.

Source

2010-07-08 18:44:17 jeroen

Ok, fait les changements, mais toujours pas de chance – kaupov

Centrer un div horizontalement avec une largeur variable ne fonctionnant pas dans IE

Répondre

Questions connexes