Cette boîte est centrée horizontalement en réglant ses marges droite et gauche à "auto". C'est le moyen le plus sûr pour parvenir à un centrage horizontal avec CSS et qui fonctionne très bien dans la plupart des navigateurs supportant CSS2. Malheureusement, IE5/Win ne répond pas à cette méthode - un "shortcoming" de ce navigateur, pas la technique.
Il y a un contournement simple. (Pause pendant que vous avez la nausée induite par ce mot) Prêt ? IE5/Win applique incorrectement l'attribut CSS "text-align" aux éléments de niveau bloc. Le fait de déclarer "text-align:center" pour l'élément bloc conteneur (souvent l'élément BODY) centre horizontalement la boîte dans IE5/Win. Il existe un effet induit par ce contournement : l'attribut CSS "text-align" est hérité, centrant le contenu inline. Il est souvent nécessaire de régler explicitement l'attribut "text-align" pour la boîte centrée, neutralisant ainsi les effets du contournement de IE5/Win. La CSS pertinente suit.
body {
margin:50px 0px; padding:0px;
text-align:center;
}
#Contenu {
width:500px;
margin:0px auto;
text-align:left;
padding:15px;
border:1px dashed #333;
background-color:#eee;
}
Source BlueRobot. Seul le lien original de référence. Traduction Christophe Ducamp pour FractalCity