[HTML] Center une série d'images verticalement et horizontalement

Version imprimable

Bonjour,

J'ai centré une série d'images horizontalement mais je n'arrive pas à faire de même verticalement. Voici le code :
Code:

1 2 3 4 5 6 7 8 9 10 <html> <head> <title>Test</title> </head> <body background="images/background.jpg"> <center> <img src="images/partie1.gif" align="middle"><img src="images/partie2.gif" align="middle"> </center> </body> </html>
J'ai du oublier quelque chose mais je sais pas ce que c'est.

Merci d'avance

23/09/2006, 15h00
Auteur

bonjour,

pour pouvoir centrer verticalement, il faut connaître la hauteur du conteneur qui n'est pas nécessairement égale la hauteur de la fenêtre du navigateur.

Pour moi tes images sont centrées verticalement : la hauteur de ton document est égale à la somme des hauteurs de tes images. Et visiblement, il n'y a pas de marges définies.
23/09/2006, 22h31
in_flames68

Merci pour ta réponse.

Ceci pourrai t'aider à résoudre mon problème : http://inflames68.free.fr/test/
Je voudrai que les images soient centrées verticalement par rapport à la hauteur de la page.

un script est je crois ce qu'il y a de mieux (je ne crois pas qu'il y ait un équivalent en CSS ) :

Code:

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
 
<html>
<head>
<title></title>
 
<style type="text/css">
<!--
body{
 background-image: url("images/background.jpg");
 margin: 0px;
 paddind: 0px;
}
#idDivImg{
 margin: auto;  //pour le centrage horizontal
 padding: 0px;
 text-align: center;
}
#img1, #img2{
 border: none;
 float: left;  //pour avoir les images sur la meme ligne
}
 
//-->
</style>
 
<script type="text/javascript">
<!--
//Pour mettre la page aux dimension des images
//Essentiel pour les basses résolutions
 
function dimDoc()
{
 var lg, ht, i1, i2;
 i1 = document.getElementById("img1");
 i2 = document.getElementById("img2");
 lg = i1.clientWidth;
 lg = lg + i2.clientWidth;
 
 
 //si la largeur de la  page est plus petite que la somme des largeurs des images
 //on redimensionne le conteneur des images idDivImg
 if (document.body.clientWidth<lg)
 {
  document.getElementById("idDivImg").style.width = lg+"px";
 }
 
 //on prend l'image la plus haute
 ht = (i1.clientHeight>i2.clientHeight)?i1.clientHeight:i2.clientHeight;
 
 //pour le centrage vertical
 document.body.style.paddingTop = (document.body.clientHeight-ht)/2+"px";
 
}
 
//-->
</script>
 
</head>
 
<body onload="dimDoc()" onresize="dimDoc()">
 
<div id="idDivImg">
     <img id="img1" src="images/partie1.gif" hspace="0" vspace="0" align="middle">
     <a href="http://inflames68.free.fr/test/page1.html">
     <img id="img2" src="images/partie2.gif" hspace="0" vspace="0" align="middle">
     </a>
</div>
 
</body>
 
</html>

24/09/2006, 10h01
in_flames68

Merci pour ton script, les images sont centrées verticalement mais plus horizontalement. J'ai essayé en rajoutant les balises center mais ça n'a rien changé.
24/09/2006, 11h02
fallais

Code:

vertical-align: middle;

:)
24/09/2006, 14h21
in_flames68

Pour ça c'est bon mais je n'arrive pas à centrer les images horizontalement elles sont colées à gauche de l'écran
24/09/2006, 14h26
manciaux

Tu peux mettre tes images dans un tableau et les aligner dans les cellules non?
24/09/2006, 14h41
fallais

ou dans un div et tu fais :

Code:

text-align: center;

:)
24/09/2006, 16h49
Auteur

le div conteant les images a l'attribut text-align: center

Sur quel navigateur as-tu fait ton test ? Je crois que IE ne prend pas en compte margin:auto;

Je vais regarder ce qui ne va pas.

Quelle est la résolution de ton écran (pour je puisse m'adapter)?
24/09/2006, 22h59
Bisûnûrs

C'est parce que tu as un float:left et que le div qui contient tes images ne fait pas la largeur de l'écran, mais la largeur des images.
24/09/2006, 23h09
Auteur

Citation:

Envoyé par BisounoursJos

C'est parce que tu as un float:left et que le div qui contient tes images ne fait pas la largeur de l'écran, mais la largeur des images.

+1
j'avais complètement négligé ce point :roll:

J'ai mis les images en float pour pouvoir les mettre sur la même ligne. Pour ce qui est de la largeur du div, j'ai pensé uniquement aux petites résolutions 800x600 et 1024x768, je ne peux pas aller au-delà avec mon écran. Avec ces résolutions, les images prennent la largeur de l'écran.
24/09/2006, 23h13
Bisûnûrs

Citation:

Envoyé par Auteur

J'ai mis les images en float pour pouvoir les mettre sur la même ligne.

A priori, si les images ne sont pas contenues dans des div différents, elles iront sur la même ligne, sans le float.

Code:

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
39
40
41
42
43
44
45
46
47
48
49
50
51
 
<html>
<head>
<title></title>
<style type="text/css">
<!--
img{
 /*height: 140px;
 width: 500px;*/
 border: none;
 margin: 0px;
}
body{
  text-align: center;
  margin: 0px;
  padding: 0px;
}
 
//-->
</style>
 
<script type="text/javascript">
<!--
function setPaddingTop()
{
  var ht1 = document.getElementById("img1").clientHeight;
  var ht2 = document.getElementById("img2").clientHeight;
  var ht = (ht1>ht2)?ht1:ht2;
 
  
  if (ht<document.body.clientHeight)
  {
     //alert(ht+" "+document.body.clientHeight);
     document.body.style.paddingTop = (document.body.clientHeight-ht)/2+"px";
  }
}
 
//-->
</script>
 
</head>
 
<body onload="setPaddingTop()" onresize="setPaddingTop()">
 
<nobr>
<img id="img1" src="image1.jpg" hspace="0" vspace="0"><a href=""><img id="img2" src="image2.jpg" hspace="0" vspace="0"></a>
</nobr>
 
</body>
 
</html>

-la fonction setPaddingTop() centre les images verticalement.
-nobr pour éviter un retour à la ligne des images si le document n'est pas assez large.

25/09/2006, 17h49
in_flames68

J'utilise Firefox et j'ai une résolution d'écran de 1280*1024
25/09/2006, 19h32
Auteur

Citation:

Envoyé par in_flames68

J'utilise Firefox et j'ai une résolution d'écran de 1280*1024

ok. Et le dernier bout de code (message 14) que j'ai posté fonctionne ?
26/09/2006, 21h00
in_flames68

Oui ça marche merci beaucoup :)
27/09/2006, 09h42
Bisûnûrs

Le bouton :resolu: est à ta disposition, merci.