Problème d'alignement vertical [Résolu]

[Mister Paul]

Bonjour,


j'utilise un script PHP, PHP Directory Listing, pour lister automatiquement le contenu d'un répertoire.
J'ai un souci avec l'alignement vertical qui est chaotique. Mais c'est aléatoire : à chaque rechargement les images décentrées verticalement peuvent ne pas être les mêmes...

Je ne comprends pas pourquoi.
Votre aide est la bienvenue !


Le code pour chacune des icônes :

Code :

<div class="item" id="file_En_Dossier_CI.pdf"><table class="thumbnail"><tr><td><a rel="lightbox[set1]" title="En_Dossier_CI.pdf" href="En_Dossier_CI.pdf"><img src=".thumbnails/En_Dossier_CI.jpg" alt="En_Dossier_CI.pdf" title="En_Dossier_CI.pdf" /></a></td></tr></table><br /><a href="En_Dossier_CI.pdf">En<span class="hidden">_</span>Dossi&hellip;<span class="hidden">pdf</span></a></div>

La feuille de styles :

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
body {
  background-color: #fff;
  margin: 50px;
  font-family: monospace;
  font-size: 9pt;
}
 
a {
  color: #000;
  text-decoration: none;
}
 
a:hover {
  color: #f70;
}
 
.thumbnail a:hover {
  color: #000;
}
 
img {
  border: none;
}
 
table, tr, td {
  padding: 0;
  margin: 0;
  width: 80px;
  height: 80px;
  overflow: hidden;
}
 
td {
  vertical-align: middle;
  text-align: center;
}
 
tr {
  vertical-align: middle;
  text-align: center;
}
 
.item {
  display: inline-block;
  margin: 1px;
  width: 110px;
  height: 105px;
  text-align: center;
  padding: 0 0 15px 0;
}
 
.thumbnail {
  display: inline-block;
  width: 80px;
  height: 80px;
  border: 1px solid #aaaaaa;
  text-align: left;
  font-size: 5pt;
}
 
.txt {
  display: inline-block;
  text-align: left;
  padding: 5px;
}

Merci !
PAul

[Mister Paul]

J'ai eu beau ajouter des :

Code :

     vertical-align: middle;

un peu partout : ça n'a rien changé...

[ornitho13]

Salut,

Si tu veux que ton "vertical-align" fonctionne, il faut spécifier une taille à ton "td"

Exemple :

Code css :

1
2
3
4
5
6
 
.thumbnail td {
    vertical-align: middle;
    text-align: center;
    height:70px;
}

on remaniant un peu ton code css, voici ce que cela donne:

Code css :

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
 
body {
  background-color: #fff;
  margin: 50px;
  font-family: monospace;
  font-size: 9pt;
}
 
a {
  color: #000;
  text-decoration: none;
}
 
a:hover {
  color: #f70;
}
 
.thumbnail a:hover {
  color: #000;
}
 
img {
  border: none;
}
 
table, tr, td {
  padding: 0;
  margin: 0;
  width: 80px;
  overflow: hidden;
}
 
td {
  vertical-align: middle;
  text-align: center;
  height:70px;
}
 
.item {
  display: inline-block;
  margin: 1px;
  width: 110px;
  height: 105px;
  text-align: center;
  padding: 0 0 15px 0;
}
 
.thumbnail {
  display: inline-block;
  width: 80px;
  height: 80px;
  border: 1px solid #aaaaaa;
  text-align: left;
  font-size: 5pt;
}
 
.txt {
  display: inline-block;
  text-align: left;
  padding: 5px;
}

++

[Mister Paul]

Merci.