11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Centrer un div à l'écran

Bonjour,

Comment fait-on en Javascript pour centrer horizontalement et verticalement dans la page du navigateur un div:

- quelque soit les dimensions de ce div
- quelque soit la résolution du client

J'aurai besoin d'une solution FF+IE.

Merci d'avance.

A+
Modifié par Tranus (25 Jan 2007 - 15:29)
Salut Tranus,
Je fais comme ça:

function $(strId){
	return document.getElementById(strId);
}

 pageWidth = 0;pageHeight = 0;
function getWindow(){
  pageWidth =  window.innerWidth;
  pageWidth = (pageWidth)? pageWidth : document.documentElement.clientWidth;
  pageWidth = (pageWidth)? pageWidth: document.body.clientWidth;

  pageHeight =  window.innerHeight;
  pageHeight = (pageHeight)? pageHeight: document.documentElement.clientHeight;
  pageHeight = (pageHeight)? pageHeight: document.body.clientHeight;
}

function posDiv(){
  getWindow();
  var myDiv = $('iddetadiv');
  var posLeft = (pageWidth-myDiv.offsetWidth)/2;
  myDiv.style.left = (posLeft<0)?0+"px":posLeft+"px";
  var posTop = (pageHeight-myDiv.offsetHeight)/2;
  myDiv.style.left = (posTop<0)?0+"px":posTop+"px";
}


Je ne sais pas si c'est la meilleur solution, si il y a mieux, ça m'interresse de savoir aussi...
Modifié par matmat (24 Jan 2007 - 20:48)
very good!, je pense que l'option de maniT4c est mieux car elle te permet de positionner n'importequelle div en fonction de son élement parent, ce qui correspond plus à ce que tu veux faire que ma solution qui positionne par rapport à la page. Merci maniT4c ça vat me servir aussi Smiley biggrin
Tranus a écrit :
Bonjour,

Comment fait-on en Javascript pour centrer horizontalement et verticalement dans la page du navigateur un div:

- quelque soit les dimensions de ce div
- quelque soit la résolution du client

J'aurai besoin d'une solution FF+IE.

Merci d'avance.

A+


Salut,

pour répondre sur le même rythme que ta question
a écrit :

- quelque soit les dimensions de ce div
- quelque soit la résolution du client


Rigoureusement impossible :

si dimension_div > dimension_viewport alors pas de centrage envisageable.

Suggestion : formule ta question de manière moins speed et plus circonstanciée Smiley cligne
a écrit :
Rigoureusement impossible :

pas sur... justement avec js tu peux redimensioner et repositionner tes élements celon l'ecran, quelque soit ça taille.
regarde cet excelent article de l'excelent 'A List Apart' :
http://alistapart.com/articles/switchymclayout
Par contre sur le rythme de la question tout à fait d'accord avec toi.
Sujet clos
Aller à