zion -  Comment centrer verticalement un cadre dans une page?
Le centrage vertical diffère du centrage horizontal dans la mesure où il fait intervenir la zone de visualisation, c'est à dire la zone de l'écran où s'affiche la page Web.

En d'autres termes, le centrage horizontal se fait par rapport à la largeur du document (qui est égale à la largeur de la zone de visualisation dans l'écrasante majorité des cas), alors que le centrage vertical se fait par rapport à la hauteur de la zone de visualisation, et ceci, indépendamment de la longueur du document.

Une bonne méthode est d'utiliser le positionnement absolu. L'idée est de placer le cadre à 50% de la hauteur de la zone de visualisation, puis de le faire "remonter" en donnant à sa marge du haut une valeur négative et égale à la moitié de sa hauteur :

  1. div#principal { 
  2. position: absolute; 
  3. height: 300px; 
  4. top: 50%; 
  5. margin-top: -150px; 
  6. }



Remarques :

* On peut aussi utiliser cette technique pour centrer horizontalement le cadre, et le placer parfaitement au milieu de l'écran.
* Cette méthode avoue ses limites lorsque le cadre est plus haut que la zone de visualisation. Le haut et le bas du cadre ne seront alors plus visible. La résolution de ce cas sera abordée prochainement.
* Cette méthode ne fonctionne pas avec Netscape 4 qui ne reconnait pas les marges négatives.


Merci à gm_superstar pour cet article
Poster un commentaire
Utilisateur
Mot de passe
 
Informaticien.be - © 2002-2024 AkretioSPRL  - Generated via Kelare
The Akretio Network: Akretio - Freedelity - KelCommerce - Votre publicité sur informaticien.be ?