Discussion :

[lelapinrusse]

J'ai un Div que je centre de cette manière:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
.global {
position:absolute;
left: 50%; 
top: 50%;
width: 750px;
height: 500px;
margin-top: -250px;
margin-left: -375px;
border: 1px solid #000000;
}

Je me rend compte que ca ne marche pas en 800*600 car le dessus du DIV est mangé (surement à cause des marges négatives).

Comment faire pour centrer un DIV sur toutes les résolutions ?

PS: Tout le reste du site est positionner par rapport au coin de ce DIV donc pas de problème pour le reste.

[blueice]

Peut-être à cause du border...
Tu dois absolument le centrer verticalement ?

[Floriang33]

Pour centrer correctement sur l'horizontal :

Code :

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

1
2
3
4
5
6
7
.global {
position:absolute;
width: 750px;
height: 500px;
margin : auto;
border: 1px solid #000000;
}

Et aprés si tu veux régler la verticale, rajoute un ptit top.

[lelapinrusse]

Le code que tu viens de me donner ne centre rien chez moi.
Le Div ce colle dans le coin supérieur gauche de la page.

Quelqu'un aurait-il un code qui permettrait de centrer un Div horizontalement et verticalement sous toute résolution ?

[Erwan31]

Bonjour,
l'espace vertical du viewport (zone d'affichage) en 800X600 est proche de 430px, il est donc normal que le haut de la page soit rogné puisque sa hauteur est de 500px.

Essayes avec cette solution signée Candygirl:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
html,body {height:100%;}
 
body {min-height:500px;}
 
#container {
 position:relative;
 top: 50%;
 width: 750px;
 height: 500px;
 margin: -250px auto 0;
}

Le min-height évite d'avoir du contenu rogné en haut.

PS: pourquoi veux tu avec un centrage vertical?

[Floriang33]

Le code que tu viens de me donner ne centre rien chez moi.
Le Div ce colle dans le coin supérieur gauche de la page.

Quelqu'un aurait-il un code qui permettrait de centrer un Div horizontalement et verticalement sous toute résolution ?

Oui en effet j'ai pas fait attention au absolute. Je pense que ca fonctionnerait avec relative. Mais pas pour l'horizontal ^^.

[lelapinrusse]

Merci pour ce code.

Le centrage horizontal ce fait mais vertical pas. Le DIV reste collé au dessus.

J'avais peur de posé une bête question mais c'est pas simple apparement et je ne trouve rien sur internet...

Quelqu'un a une autre idée ?

[Erwan31]

Merci pour ce code.
Le centrage horizontal ce fait mais vertical pas. Le DIV reste collé au dessus.

Et pourtant ça fonctionne. T'es sûr que tu as bien tout intégré?
Sur quels navigateurs testes tu?