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

Centrer un élément par rapport à son parent

Voici une fonction qui vous permettra de positionner un élément au centre de son parent.

La fonction

javascript
function centerPopup(element) {
	var height=document.getElementById(element).offsetHeight;//hauteur de l'élément à positionner
	var width=document.getElementById(element).offsetWidth;//largeur de l'élément à positionner
	myParent=document.getElementById(element).parentNode;
	var pHeight=myParent.offsetHeight;//Hauteur de l'élément parent
	var pWidth=myParent.offsetWidth;//Largeur de l'élément parent
	var sTop=myParent.scrollTop;//Hauteur de défilement de l'élément parent
	var sLeft=myParent.scrollLeft;//Longueur de défilement de l'élément parent
	var posY=(pHeight/2)-(height/2)+sTop;//Calcul de la position en Y
	var posX=(pWidth/2)-(width/2)+sLeft;//Calcul de la position en X
	document.getElementById(element).style.top=posY+"px";
	document.getElementById(element).style.left=posX+"px";
}

Utilisation

Il vous suffit d'appeler la fonction de cette manière. centerPopup('idDeMonElement');

Prenez bien le temps d'identifier correctement l'élément parent de votre élément à positionner afin d'éviter les mauvaises surprises


10/01/2007 09:15 -

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