Discussion :

[jcaspar]

Bonjour à tous !

je souhaiterais savoir comment centrer un bloc au milieu de la page
verticalement et horizontalement à partir d'une feuille de style


Je vous remercie d'avance pour vos conseils et astuces !

Jean Marc

Code :

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

1
2
 
<div id="milieu"> Texte ............</div>

[Deallyra]

Bonjour,

Conseil et astuce? "Utilises la fonction recherche du forum" ^^

vertical-align : middle et un margin : 0 auto pour ton div possédant height et width.
Le tout dans un élément père ayant une taille définie

[jcaspar]

Merci pour votre réponse !
Je viens de trouver la solution ..

Jean-Marc

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
 
#container{
 width:800px;
 height:400px;
 position:absolute;
 left: 50%;
 top: 50%;
 width: 700px;
 height: 400px;
 margin-top: -200px; /* moitié de la hauteur */
 margin-left: -350px; /* moitié de la largeur */
 border: 1px solid #000;
 background-color: #0099CC;
 
 }

[Halleck]

Euh... la solution de MimiCracra44 me semble mieux pour centrer horizontalement, regarde là, ne fais pas juste un copier-coller de ce que tu as trouvé

=> à mon avis il vaut mieux des marges auto, parce que sinon à chaque fois que tu vas changer la taille de ton conteneur il faudrait aussi changer la taille des margin à la main...

Par contre, pour centrer verticalement il me semble bien que spécifier une valeur absolue pour le margin-top est la seule solution, parce que le vertical-align ne marche pas pareil avec tous les navigateurs (à vérifier), mais je ne suis pas certain.

[Erwan31]

Euh... la solution de MimiCracra44 me semble mieux pour centrer horizontalement, regarde là, ne fais pas juste un copier-coller de ce que tu as trouvé

=> à mon avis il vaut mieux des marges auto, parce que sinon à chaque fois que tu vas changer la taille de ton conteneur il faudrait aussi changer la taille des margin à la main...

Par contre, pour centrer verticalement il me semble bien que spécifier une valeur absolue pour le margin-top est la seule solution, parce que le vertical-align ne marche pas pareil avec tous les navigateurs (à vérifier), mais je ne suis pas certain.

Bonsoir,
non pour centrer à la fois horizontalement ET verticalement si la taille de l'élément a centrer est fixe, il vaut d'abord mieux se tourner vers la solution de jcaspar SI et seulement si la hauteur et la largeur de l'élément à centrer ne dépassent pas la zone d'affichage de la plus petite résolution ciblée, c-à-d par exemple environ 425px X 800px pour une résolution de 800X600.
Ici la hauteur de l'élément à centrer est de 400px X 700px donc aucun risque
que le contenu soit rogné à cause des marges négatives.
Il ne sera rogné qu'en cas de diminution du de la zone d'affichage ou de visualisation sur petites écrans, cette solution a donc certain inconvénients.

Si la taille de l'élément a centrer est inconnue il faudra alors se tourner soit vers un tableau (la propriété vertical-align ne s'appliquant qu'aux éléments dont le display est table-cell > display les TD par default) ou la solution proposée par CandyGirl.

[Halleck]

ouh la, aller de lien en lien m'a amené assez loin, mais c'est très intéressant. Va falloir que je change 2-3 de mes méthodes

Par contre, pour IE faut passer par du JS dans le CSS. Le JS n'empêche pas la validation de la feuille de style au test W3C ?