En mettant à jour, une page html concernant l’instinct de mort de Jacques Mesrines, j’ai un peu galéré aujourd’hui autour du simple centrage d’un élément sur une page sous IE 6 :
Le problème est assez simple, je souhaitais centrer un div. La technique officielle consiste à utiliser la propriété “margin” en “auto” à gauche et à droite, et à définir la largeur (”width”) de manière fixe : Ce qui veut dire que les marges à gauche et à droite seront calculées en fonction de l’élément central.
<style type="text/css"> <!-- centrer{ margin-left : auto; margin-right : auto; width : 760px; } --> </style> <body> <div class="centrer">élément centré</div> </body>
En utilisant les raccourcis css, on peut déclarer “margin : 0 auto;” ce qui signifie que les marges hautes et basses seront nulles, et que les marges gauches et droites seront calculées automatiquement.
<body>
<div style="margin : 0 auto; width : 760px;">élément</div>
</body>
Oui, mais voilà, ca ne fonctionne pas sous Internet Explorer 6. Il faut centrer l’élément avec la propriété text-align au niveau supérieur :
<body style="text-align:center;">
<div>élément</div>
</body>
Pour que l’élément fonctionne sur tous les navigateurs :
<body style=”text-align:center;”>
<div style=”margin : 0 auto; width : 760px;”>élément</div>
</body>
Si l’on rajoute cette difficulté au problème du float internet explorer, ca commence à faire beaucoup pour un navigateur !
