Discussion :

[Gunner4902]

Bonjour,

Je cherche à centrer verticalement sur toute la hauteur de ma fenêtre une image.

Déjà que CSS est très limite sur cette pratique (comme s’il ne pouvait exister une propriété comme text-align:center qui lui gère parfairement l’alignement horizontal… d’ailleurs pourquoi text et pas inline-align ?), je ne peux pas utiliser la technique du
50% en positionnement absolu + marge de -50% de la hauteur de l’image car l’image est aléatoire et à chaque fois de taille différente…

J’ai bien essayé de mettre un tableau en place pour faire un valign (bah oui, à force de tout compliquer ce qui pourrait etre simple, le CSS avoue ses limites je trouve…), reste que celà n’est pas géré parfaitement et qu’il me faut mettre un

Code :

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

height:nombre de pixel de la hauteur de la page

pour que ça soit aligné parfaitement…

Or je voudrais un truc finallement très simple : aligner tout betement une image sans tenir compte de ses pixels de hauteur sur 100% de l’écran affiché (donc si je fais F11 (sous Windows) je devrais garder l’image centrée…)

Merci de votre aide.

[BnA]

Images de tailles différentes = récup. de la taille afin d'obtenir un alignement précis = Forum Javascript

[Gunner4902]

Ok, je veux bien passer par le JavaScript pour récupérer la hauteur de l’image, mais le JS va donner une valeur dynamique… donc comment mettre cette valeur dynamique dans le code CSS ?

Code :

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

1
2
3
4
5
6
7
#global {
     position:absolute;
     top: 50%;
     height: 400px; /* valeur dynamique */
     margin-top: -200px; /* moitié de height */
     border: 1px solid #000;
     }

[rootdaoud]

bonjour,
Essayer se code javascript.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
	var fWidth;
	var fHeight;
	//For old IE browsers
	if(document.all)
	{
		fWidth = document.body.clientWidth;
		fHeight = document.body.clientHeight;
	}
	//For DOM1 browsers
	else if(document.getElementById &&!document.all)
	{
		fWidth = innerWidth;
		fHeight = innerHeight;
	}
	else if(document.getElementById)
	{
		fWidth = innerWidth;
		fHeight = innerHeight;
	}
	//For Opera
	else if (is.op)
	{
		fWidth = innerWidth;
		fHeight = innerHeight;
	}
	//For old Netscape
	else if (document.layers)
	{
		fWidth = window.innerWidth;
		fHeight = window.innerHeight;
	}
 
document.getElementById('id_de_votre_element').style.left=fWidth/2;
document.getElementById('id_de_votre_element').style.top=fHeight/2 ;

[Gunner4902]

Merci RootDaoud.
Pourtant celà ne fonctionne pas…

Je récapitule pour voir d’où peut venir mon erreur :

Dans le Body, le code JS que tu m’as donné :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<script type="text/javascript">
		<!--
		var fWidth;
	var fHeight;
	//For old IE browsers
	if(document.all)
	{
		fWidth = document.body.clientWidth;
		fHeight = document.body.clientHeight;
	}
	//For DOM1 browsers
	else if(document.getElementById &&!document.all)
	{
		fWidth = innerWidth;
		fHeight = innerHeight;
	}
	else if(document.getElementById)
	{
		fWidth = innerWidth;
		fHeight = innerHeight;
	}
	//For Opera
	else if (is.op)
	{
		fWidth = innerWidth;
		fHeight = innerHeight;
	}
	//For old Netscape
	else if (document.layers)
	{
		fWidth = window.innerWidth;
		fHeight = window.innerHeight;
	}
 
document.getElementById('id_de_votre_element').style.left=fWidth/2;
document.getElementById('id_de_votre_element').style.top=fHeight/2 ;
		//-->
	</script>

ensuite le script de l’image :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div id="image2">
<?php
	$imgpath = "dossier/";
	if (is_dir($imgpath))
	{
	if ($condir = opendir($imgpath))
	{
	$i = 0;
	while (($curfile = readdir($condir)) != false)
	{
	  $extension = "";
$extension = preg_replace("/.+\.(.{3,4})/", "$1", $curfile);		  if ($extension == "jpeg" || $extension == "jpg")
	  {
	  $i++;
	  $images{$i} = $curfile;
	}	
	}					
           {
	  $i = rand(1, $i);
	  $image = $images{$i};	
             echo "<img src=\"";		
             echo $imgpath;
	  echo "".$image."\" alt=\"\" />";
	}							}
	}
	?>
</div>

malgré celà, l’image n’est pas centrée et la console d’erreur d’Opera me précise :

JavaScript - 127.0.0.1/random.php
Inline script thread
Error:
Error:
name: TypeError
message: Statement on line 28: Could not convert undefined or null to object
Backtrace:
Line 28 of inline#3 script in 127.0.0.1/random.php
(document.getElementById("image2")).style.top = fHeight / 2;

Qu’est-ce qui ne va pas ?

Merci de votre aide

[Gunner4902]

J’ai tenté de simplifier.

Sachant que je sais mettre l’image à 50% en top et en left en CSS, je souhaites juste faire :

* -50% de la hauteur de l’image en margin-height
* -50% de la largeur de l’image en margin-left

J’ai essayé ceci :

Code :

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

1
2
3
4
5
6
7
<script type="text/javascript">
	var fWidth = img.width;
	var fHeight = img.height;
	var img = document.images;
	document.getElementById('image').style.marginLeft=-fWidth/2;
	document.getElementById('image').style.marginTop=-fHeight/2;
		</script>

Mais ça ne fonctionne pas…
Si quelqu’un a une idée, je suis preneur, je tourne en rond depuis plus de quinze jours sur ce centrage vertical dynamique.

[Gunner4902]

J’ai pas mal avancé cet après-midi et je sens que je touche au but, mais il me manque un petit coupe de pouce…

HTML

Code :

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

<img src="monimage.jpg" name="name_image\" alt="" />

JAVASCRIPT

Code :

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

1
2
3
4
5
6
7
8
<script type="text/javascript">
1. document.getElementById('id_image').style.position="absolute";
2. document.getElementById('id_image').style.top="50%";
3. document.getElementById('id_image').style.left="50%";
4. document.getElementById('id_image').style.marginLeft="-"document.name_image.height"/2";		
5. document.getElementById('id_image').style.marginTop="-"document.name_image.width"/2";
6. document.write(document.name_image.width + " × " + . document.name_image.height + " pixels");
</script>

Les lignes 1, 2, 3 et 6 fonctionnent normalement
Par contre j’aurai besoin d’un coup de main pour les lignes 4 et 5… l’idée c’est de déclarer par exemple "-(120/2)" sous entendu - 60 pixels.

Merci de votre aide

[E.Bzz]

Bonjour,

Code :

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

1
2
4. document.getElementById('id_image').style.marginLeft=(document.getElementById('name_image').style.height*-1/2)+"px";		
5. document.getElementById('id_image').style.marginTop=(document.getElementById('name_image').style.width*-1/2)+"px";	;

A+

[Gunner4902]

Merci E.Bzz mais en appliquant ton code, j’ai l’image qui commence toujours à 50% top et left, par contre elle l’image est diminuée de 50% en width et height…

Je l’ai donc modifié :

Code :

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

1
2
3
4
5
6
7
8
<script type="text/javascript">
document.getElementById('id_image').style.position="absolute";
document.getElementById('id_image').style.top="50%";
document.getElementById('id_image').style.left="50%";
document.getElementById('id_image').style.marginLeft=(document.name_image.width*-1/2)+"px";
document.getElementById('id_image').style.marginTop=(document.name_image.height*-1/2)+"px";
document.write(document.name_image.width/2 + " × " + document.name_image.height/2 + " pixels");
</script>

L’image est désormais parfaitement centrée, quelque soit la résolution !

Merci de m’avoir mis sur la piste

[E.Bzz]

Merci E.Bzz mais en appliquant ton code, j’ai l’image qui commence toujours à 50% top et left, par contre elle l’image est diminuée de 50% en width et height…

J'avoue avoir plus regardé la syntaxe que le résultat attendu

A+

[Gunner4902]

Pas grave
Je travaille avec la console d’erreur d’Opera car je débute en JavaScript. Je pense que la syntaxe finale doit être bonne. Ce qui me manquait était donc la logique syntaxique pour déclarer

Code :

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

*-1/2

J’avoue d’ailleurs que ça ne me parait pas très logique même maintenant .

[E.Bzz]

J’avoue d’ailleurs que ça ne me parait pas très logique même maintenant .

Code :

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

(-1*(document.name_image.height/2))

Ca te paraitrait peut-être plus logique comme ça, mais c'est la même chose
EDIT : je voulais juste limiter le nb de parenthèses ...

A+

[Gunner4902]

Oui je comprends mieux ainsi.
Merci