[HTML & CSS] div centrés en hauteur ?

[Didier_S]

Bonjour,

je dois réaliser un site de hauteur et de largeur fixe (admettons 500 sur 400), et il faut que ce site soit "centré" au milieu de la fenêtre du navigateur...

je peux le faire en <table>, mais j'aimerais utiliser des <div>...

j'ai donc créé un <div> "principal", height:100%; width:100%, et à l'intérieur de celui-ci un autre <div> "contenu", height:500px; width:400px
malheureusement, j'ai beau mettre des vertical-align:middle de partout, rien ne marche, et je commence à me dire que rien ne vaut mes bons vieux <table>...

des idées ?
merci d'avance

 

[pc07]

salut,

le vertical-align n'est pas vraiment reconnu avec les css en tout cas ne fonctionne pas vraiment. Tu peux aller faire un tour sur -http://www.alsacreations.com ou -http://openweb.eu.org , ces deux sites parlent des css. Sur le premier il y a un forum dont la communauté est assez active. Tu y trouveras une solution.

 

[Cartapus]

Salut, étant donné que la hauteur moyenne d'un écran est 760px, un margin-top:180px ([760-400]/2) devrait aller. mais c'est à proprement dit pas centré.

 

[Didier_S]

Salut, étant donné que la hauteur moyenne d'un écran est 760px, un margin-top:180px ([760-400]/2) devrait aller. mais c'est à proprement dit pas centré.

j'y avais pensé, mais avec une haute résolution (genre 1600x1024), le rendu est carrément horrible.

 

[Didier_S]

#global {
     position:absolute;
     left: 50%; 
     top: 50%;
     width: 700px;
     height: 400px;
     margin-top: -200px; 
     margin-left: -350px; 
     border: 1px solid red;
     }

la technique des marges négatives marche à merveille

 

[shrom]

Ca devrait t'aider:

Centrer les éléments ou un site web en CSS

 

[Cartapus]

A mettre en favoris ce thread :wink:

 

[Hearty]

soit dit au passage, le vertical-align en css ne centre pas un element par rapport a son conteneur, mais par rapport aux autres elements du meme conteneur