Table des matières
Niveau
..........
En rapport...

Placer un élément au centre de la fenêtre du navigateur

Je vais vous présenter une méthode pour placer un élément au milieu de la fenêtre du visiteur.
Nous utilisons ici 2 fonctions (qui peuvent être réunis en une seule si besoin est).

Retrouver la taille de la fenêtre

Voir l'article retrouver_la_taille_de_la_fenetre

javascript
function returnSize() {
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
  var result = new Array(myWidth,myHeight);
  return result;
}

Positionner l'élément

javascript
function windowCenter(myId) {
	result=returnSize();
	var myWidth=result[0];
	var myHeight=result[1];
	var elementWidth=document.getElementById(myId).offsetWidth;
	var elementHeight=document.getElementById(myId).offsetHeight;
        var myScrollLeft=document.documentElement.scrollLeft;
	var myScrollTop=document.documentElement.scrollTop;
	var posX=myScrollLeft+myWidth-myWidth/2-elementWidth/2
	var posY=myScrollTop+myHeight-myHeight/2-elementHeight/2;
	document.getElementById(myId).style.left=posX+"px";
	document.getElementById(myId).style.top=posY+"px";
}

Il vous suffit ensuite d'appeler cette fonction quand bon vous semblera en précisant l'ID de l'élément à positionner.

exemple:

html4strict
<div id="monDiv">
Ce div ce placera au milieu
</div>
<a href="#" onclick="windowCenter('monDiv')">Cliquez ici</a>
Il est a noter que l'élément que vous voulez centré doit être positionné en “absolute”

Aperçu

Cliquez ici

Autre methode

Vous pouvez aussi centrer vos element avec du CSS

10/05/2006 11:35 -

ManiT4c
Gérant et chef de projet de l'agence web Op'art, je suis également webmaster freelance. Retrouvez moi également sur twitter.