Discussion :

[nouby]

Bonjour,
je voudrais centrer un div horizontalement avec javascript car avec css je ne peux pas car le div doit etre en position absolute.
Auriez-vous une soluce ?

J'ai pas de code pour ça, j'en cherche un justement

Google me propose que du CSS et pourtant j'ai bien écris javascript avant ma question...dans la zone de recherche de google.

[SpaceFrog]

Attribue ton css avec javascript ...
par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
Element.style.marginLeft="auto"
Element.style.marginRight="auto"

[Doksuri]

au final, ce sera toujours du CSS qui "appliquera" le style a ton element... le JS n'y changera rien... tu peux bien mettre a jour le CSS avec du JS... mais au final, le placement se fait avec du CSS, donc la solution de google n'est pas totalement deconnante.

meme la solution de SpaceFrog

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
Element.style.marginLeft="auto";
Element.style.marginRight="auto"

au final, ca applique du CSS a l'element

position absolute, mais par rapport a quoi ? un element parent ? a la page ? au viewport ?

[nouby]

Merci de vos réponses

Moi j'avais essayé ça aprés mon message mais ça ne marche pas :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
	// Centre le message.
	var element=document.getElementById('intro');
	element.style.width="800px";
	var screencenter=Math.trunc(screen.width/2);
	var pos=""+screencenter-(Math.trunc(element.style.width/2))+"px";
	element.style.left=pos;

Je voulais utiliser du javascript car en position absolute le margin.left auto ne fonctionne pas en css.

Position absolute, d'aprés ce que j'ai compris, c'est par rapport à rien, c'est juste une position directe sur l'écran qui ne tient pas compte des autres éléments mis en position relative.


Mon problème maintenant c'est de savoir donner une valeur en pixels à element.style.left.
Dans mon code : element.style.width fonctionne bien mais pas element.style.left.

C'est ma variable pos qui est mal écrite, car ça marche si j'écris element.style.left="100px";.

EDIT :

J'ai essayé comme ça mais ça marche toujours pas ;

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
	// Centre le message.
	var element=document.getElementById('intro');
	element.style.width="800px";
	var screencenter=Math.trunc(screen.width/2);
	var demilargeur=Math.trunc(element.style.width/2)
	var pos=screencenter-demilargeur;
	alert(screencenter);
	element.style.left="100px";

L'erreur est dans la définition de la variable demilargeur car elle affiche NaN par alert()
Alors que la variable screencenter affiche bien 640 par alert().
Et mon essai de element.style.let="100px" fonctionne bien, donc le pb est bien dans demilargeur mais je sais pas comment bien la définir.

[Doksuri]

la position absolute est toujours par rapport a un parent referent (un element parent en position:relative)
=> si aucun parent n'est en relative, c'est le body, le referent par default

le position:fixed est par rapport a l'ecran

[CosmoKnacki]

Plutôt que de faire des alert() pour voir ce qui se passe, utilise la console javascript de ton navigateur (Ctrl + Maj +I). console.log(MaVariable);, console.log(MonElement.style.left), console.log("400px"/2);, console.log(parseInt("400px")/2);, etc.

[nouby]

Ah oui, d'accord, je pensais pas à l'écran
C'est normal oui en effet.

Quelqu'un a une soluce pour affecter une valeur en pixels à element.style.left ?
(En javascript)


EDIT : Ah oui, super Cosmo !
Merci.

[NoSmoking]

Bonjour,

la position absolute est toujours par rapport a un parent referent (un element parent en position:relative)
=> si aucun parent n'est en relative, c'est le body, le referent par default

je trouve cela très très restrictif car en fait tout parent positionné autre que static est parent référent.
Cela s'applique donc également aux positions

• relative
• absolute
• fixed
• sticky

De plus une propriété comme translate, filter, perspective appliquée à un parent lui confère également le statut de référent.

le position:fixed est par rapport a l'ecran

plus exactement par rapport au viewport mais pas que. Si un parent crée un contexte d'empilement alors celui-ci est candidat à être parent référent.

Donc en gros si un parent possède une des propriété citées ci dessus, il sera référent.