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

**in_flames68** · 23/09/2006, 14h09

Bonjour,

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

Code :

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

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

**Auteur** · 23/09/2006, 15h00

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.

**in_flames68** · 23/09/2006, 22h31

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.

**Auteur** · 23/09/2006, 23h41

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 :

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
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>

**in_flames68** · 24/09/2006, 10h01

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é.

**fallais** · 24/09/2006, 11h02

Code :

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

vertical-align: middle;

**in_flames68** · 24/09/2006, 14h21

Pour ça c'est bon mais je n'arrive pas à centrer les images horizontalement elles sont colées à gauche de l'écran

**manciaux** · 24/09/2006, 14h26

Tu peux mettre tes images dans un tableau et les aligner dans les cellules non?

**fallais** · 24/09/2006, 14h41

ou dans un div et tu fais :

Code :

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

text-align: center;

**Auteur** · 24/09/2006, 16h49

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)?

**Bisûnûrs** · 24/09/2006, 22h59

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.

**Auteur** · 24/09/2006, 23h09

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

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.

**Bisûnûrs** · 24/09/2006, 23h13

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.

**Auteur** · 25/09/2006, 14h30

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
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>