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