Discussion :

[pierrot10]

Bonjour à tous,
je me prends le chou pour un truc banal, mais...

Je veux donc lister plusiers images dans un li.
Pour cela j'ai un script PHP qui va me lister toutes les image d'un dossier et j'ai un reultat comme ceci:

Code HTML :

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
 
<ul class="gallery">
<li><a href="assets/images/chambres/chambre1/chalet2_ch1_001.jpg" rel="lightbox[chambres/chambre]"><img src="assets/images/chambres/chambre1/chalet2_ch1_001.jpg" width="110" height="71" /></a></li>
<li><a href="assets/images/chambres/chambre1/chalet2_ch1_002.jpg" rel="lightbox[chambres/chambre]"><img src="assets/images/chambres/chambre1/chalet2_ch1_002.jpg" width="110" height="82" /></a></li>
 
<li><a href="assets/images/chambres/chambre1/chalet2_ch1_003_sdb.jpg" rel="lightbox[chambres/chambre]"><img src="assets/images/chambres/chambre1/chalet2_ch1_003_sdb.jpg" width="82" height="110" /></a></li>
<li><a href="assets/images/chambres/chambre2/chalet2_ch2_001.jpg" rel="lightbox[chambres/chambre]"><img src="assets/images/chambres/chambre2/chalet2_ch2_001.jpg" width="82" height="110" /></a></li>
<li><a href="assets/images/chambres/chambre2/chalet2_ch2_002.jpg" rel="lightbox[chambres/chambre]"><img src="assets/images/chambres/chambre2/chalet2_ch2_002.jpg" width="110" height="82" /></a></li>
<li><a href="assets/images/chambres/chambre2/chalet2_ch2_003.jpg" rel="lightbox[chambres/chambre]"><img src="assets/images/chambres/chambre2/chalet2_ch2_003.jpg" width="110" height="82" /></a></li>
<li><a href="assets/images/chambres/chambre2/chalet2_ch2_004_sdb.jpg" rel="lightbox[chambres/chambre]"><img src="assets/images/chambres/chambre2/chalet2_ch2_004_sdb.jpg" width="82" height="110" /></a></li>
<li><a href="assets/images/chambres/chambre3/chalet2_ch3_001.jpg" rel="lightbox[chambres/chambre]"><img src="assets/images/chambres/chambre3/chalet2_ch3_001.jpg" width="110" height="82" /></a></li>
<li><a href="assets/images/chambres/chambre3/chalet2_ch3_002.JPG" rel="lightbox[chambres/chambre]"><img src="assets/images/chambres/chambre3/chalet2_ch3_002.JPG" width="110" height="82" /></a></li>
<li><a href="assets/images/chambres/chambre4/chalet2_ch4_001.jpg" rel="lightbox[chambres/chambre]"><img src="assets/images/chambres/chambre4/chalet2_ch4_001.jpg" width="110" height="82" /></a></li>
<li><a href="assets/images/chambres/chambre4/chalet2_ch4_002.jpg" rel="lightbox[chambres/chambre]"><img src="assets/images/chambres/chambre4/chalet2_ch4_002.jpg" width="110" height="69" /></a></li>
<li><a href="assets/images/chambres/chambre4/chalet2_ch4_003.jpg" rel="lightbox[chambres/chambre]"><img src="assets/images/chambres/chambre4/chalet2_ch4_003.jpg" width="110" height="82" /></a></li>
<li><a href="assets/images/chambres/chambre4/chalet2_ch4_004.jpg" rel="lightbox[chambres/chambre]"><img src="assets/images/chambres/chambre4/chalet2_ch4_004.jpg" width="110" height="72" /></a></li>
<li><a href="assets/images/chambres/chambre5/chalet2_ch5_001.jpg" rel="lightbox[chambres/chambre]"><img src="assets/images/chambres/chambre5/chalet2_ch5_001.jpg" width="110" height="82" /></a></li>
<li><a href="assets/images/chambres/chambre5/chalet2_ch5_002.jpg" rel="lightbox[chambres/chambre]"><img src="assets/images/chambres/chambre5/chalet2_ch5_002.jpg" width="110" height="82" /></a></li>
<li><a href="assets/images/chambres/chambre5/chalet2_ch5_003.jpg" rel="lightbox[chambres/chambre]"><img src="assets/images/chambres/chambre5/chalet2_ch5_003.jpg" width="110" height="82" /></a></li>
<li><a href="assets/images/chambres/chambre5/chalet2_ch5_004.jpg" rel="lightbox[chambres/chambre]"><img src="assets/images/chambres/chambre5/chalet2_ch5_004.jpg" width="110" height="82" /></a></li>
<li><a href="assets/images/chambres/chambre5/chalet2_ch5_005.jpg" rel="lightbox[chambres/chambre]"><img src="assets/images/chambres/chambre5/chalet2_ch5_005.jpg" width="82" height="110" /></a></li>
<li><a href="assets/images/chambres/chambre8/chalet2_ch8_001.jpg" rel="lightbox[chambres/chambre]"><img src="assets/images/chambres/chambre8/chalet2_ch8_001.jpg" width="110" height="82" /></a></li>
 
<li><a href="assets/images/chambres/chambre8/chalet2_ch8_002.jpg" rel="lightbox[chambres/chambre]"><img src="assets/images/chambres/chambre8/chalet2_ch8_002.jpg" width="110" height="82" /></a></li>
<li><a href="assets/images/chambres/chambre8/chalet2_ch8_003.jpg" rel="lightbox[chambres/chambre]"><img src="assets/images/chambres/chambre8/chalet2_ch8_003.jpg" width="82" height="110" /></a></li>
<li><a href="assets/images/chambres/chambre8/chalet2_ch8_004.jpg" rel="lightbox[chambres/chambre]"><img src="assets/images/chambres/chambre8/chalet2_ch8_004.jpg" width="110" height="82" /></a></li>
<li><a href="assets/images/chambres/chambre8/chalet2_ch8_005.jpg" rel="lightbox[chambres/chambre]"><img src="assets/images/chambres/chambre8/chalet2_ch8_005.jpg" width="110" height="82" /></a></li>
<li><a href="assets/images/chambres/chambre8/chalet2_ch8_006.JPG" rel="lightbox[chambres/chambre]"><img src="assets/images/chambres/chambre8/chalet2_ch8_006.JPG" width="82" height="110" /></a></li>
<li><a href="assets/images/chambres/chambre9/chalet2_ch9_001.jpg" rel="lightbox[chambres/chambre]"><img src="assets/images/chambres/chambre9/chalet2_ch9_001.jpg" width="110" height="82" /></a></li>
<li><a href="assets/images/chambres/chambre9/chalet2_ch9_002.jpg" rel="lightbox[chambres/chambre]"><img src="assets/images/chambres/chambre9/chalet2_ch9_002.jpg" width="110" height="82" /></a></li>
<li><a href="assets/images/chambres/chambre9/chalet2_ch9_003_vue.jpg" rel="lightbox[chambres/chambre]"><img src="assets/images/chambres/chambre9/chalet2_ch9_003_vue.jpg" width="110" height="82" /></a></li>
<li><a href="assets/images/chambres/chambre11/chalet1_ch11_001.jpg" rel="lightbox[chambres/chambre]"><img src="assets/images/chambres/chambre11/chalet1_ch11_001.jpg" width="110" height="82" /></a></li>
<li><a href="assets/images/chambres/chambre11/chalet1_ch11_002.jpg" rel="lightbox[chambres/chambre]"><img src="assets/images/chambres/chambre11/chalet1_ch11_002.jpg" width="110" height="82" /></a></li>
<li><a href="assets/images/chambres/chambre11/chalet1_ch11_003_sdb.jpg" rel="lightbox[chambres/chambre]"><img src="assets/images/chambres/chambre11/chalet1_ch11_003_sdb.jpg" width="82" height="110" /></a></li>
<li><a href="assets/images/chambres/chambre11/chalet1_ch11_004.jpg" rel="lightbox[chambres/chambre]"><img src="assets/images/chambres/chambre11/chalet1_ch11_004.jpg" width="110" height="82" /></a></li>
<li><a href="assets/images/chambres/chambre12/chalet1_ch12_001.jpg" rel="lightbox[chambres/chambre]"><img src="assets/images/chambres/chambre12/chalet1_ch12_001.jpg" width="110" height="82" /></a></li>
<li><a href="assets/images/chambres/chambre12/chalet1_ch12_003.jpg" rel="lightbox[chambres/chambre]"><img src="assets/images/chambres/chambre12/chalet1_ch12_003.jpg" width="110" height="82" /></a></li>
<li><a href="assets/images/chambres/chambre12/chalet1_ch12_sdb.jpg" rel="lightbox[chambres/chambre]"><img src="assets/images/chambres/chambre12/chalet1_ch12_sdb.jpg" width="110" height="82" /></a></li>
</ul>

J'ai absolument besoin que les images soient centrés verticalement et horizontalement (horizontalement, ca fonctionne avec text-align=center), mais j'ai essayé plusieur truc sans succes
Voici une idée de mon css

Code CSS :

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
 
ul.gallery{
	padding-left:0px !important;
}
ul.gallery li{
	list-style-type:none;
	float:left;
/*	display:inline-block;*/
	margin:1px;/*
	overflow:hidden;*/
	border:1px solid #ff22ff;
	width:118px;
	height:118px;
	text-align:center;
 
}
ul.gallery li img{
vertical-align:middle;
margin:3px;
}

J'ai essayé plusieur autres truc, comme
line-height:118px, ou dans

Code :

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

1
2
3
4
5
ul.gallery li img{
position:absolue;
top:50%;
margin-top:-29px;
}

Mais sans succès

Merci a tous