Centrer un élément sur une page en Css

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 !

Publicités

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s

%d blogueurs aiment cette page :