[IE-FF] Div absolute centré dans la page

**roots_man** · 07/07/2011, 21h15

Bonjour,

Je vous expose mon problème, je désire centré mon div (qui sera mon div principale dans ma page) et que ca soit compatible FireFox&Internet Explorer !

Pour IE on est d'accord

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<body style="text-align:center;">

Pour firefox on est aussi d'accord

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div style="text-align:center;margin:0px auto;width:400px;height:150px;border:1px red solid;">salut</div>

Jusque la tout va bien mon div est centré dans la page au sommet de cette dernière (dans les 2 navigateurs) !

Mais maintenant je désire la décaler un peu du sommet, je pense alors a mettre un margin-top:100px; Ok la ca fonctionne toujours. Mais mon div est actuellement en position:relative; et je souhaiterai que mon div élément soit en position:absolute; Et c'est la que dans Firefox, mon div à collé a gauche et dans IE il n'est plus totalement centré, il s'est décalé vers la droite!

Si quelqu'un a une idée je suis preneur !

Merci d'avance

**BByani** · 07/07/2011, 22h51

Il existe un "hack css" plus simple.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<body>
          <!-- la div doit avoir une largeur -->
          <div style="height:700px; width:800px; margin-left:auto; margin-right:auto;"></div>
</body>

centrage = margin (left et right) placé en auto.

**Bisûnûrs** · 08/07/2011, 09h31

Envoyé par roots_man

Pour IE on est d'accord

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<body style="text-align:center;">

Non. Si tu codes correctement et que tu as un DOCTYPE valide, c'est un subterfuge que tu n'as pas à avoir à mettre en place. Il n'est utile qu'en mode Quirks pour IE8-.

Envoyé par roots_man

je souhaiterai que mon div élément soit en position:absolute;

Tu ne peux pas centrer un élément avec des marges automatiques s'il est en position absolu. La technique à utiliser est disponible dans cette Q/R de la FAQ :
http://css.developpez.com/faq/?page=...calement_block

[IE-FF] Div absolute centré dans la page

CSS

Discussions similaires

Partager

Partager