images alignées horizontalement avec légende centrée en-dessous

Version imprimable

Bonjour,

mon besoin est résumé dans le titre. J'ai repris le code de jreaux62 d'ici mais les images sont à la verticale...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style type="text/css">
#ul_liste li { /* liste */
list-style-type:none; list-style-position:inside;
display:inline-block;
width:85px;
padding:5px;
text-align:center;
vertical-align:top;
}
#ul_liste li img { /* image */
width:85px;
}
#ul_liste li span { /* texte */
width:85px;
font-size:0.9em;
color:blue;
}
</style>
<ul id="ul_liste">
  <li> <img src="g---.jpg"></li>
  <li><span>xxx</span></li>
  <li> <img src="g---.jpg"></li>
...</ul>

Vous n'avez pas dû lire tout le sujet, car il donne la solution.

Si vous êtes en html5, vous pouvez reprendre son code et utiliser la balise FIGURE :

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
 
<!doctype html>
<html lang="fr-FR">
<head>
	<meta charset="UTF-8" />
	<title>Alignement horizontal image + légende</title>
	<style type="text/css">
body {
        text-align: center; /* Pour la démo ;) */
}
ul {
        list-style: none;
        padding: 0;
}
li {
        display: inline-block;
        width: 25%; /* Jouez avec la width ou le zoom ! */
        min-width: 218px; /* L'image ne débordera pas de la boîte \o/ */
        margin: 1ex; padding: 1ex;
        border: thin solid #333;
}
figure {
        margin: 0;
        text-align: center;
}
        </style>
</head>
<body>
<ul>
	<li>
		<figure>
			<img alt="Developpez.com" src="http://www.developpez.net/template/images/logo.png" />
			<figcaption>Les professionnels de l'informatique (pas toujours&nbsp;;))</figcaption>
		</figure>
	</li>
	<li>
		<figure>
			<img alt="Developpez.com" src="http://www.developpez.net/template/images/logo.png" />
			<figcaption>Les professionnels de l'informatique (pas toujours&nbsp;;))</figcaption>
		</figure>
	</li>
	<li>
		<figure>
			<img alt="Developpez.com" src="http://www.developpez.net/template/images/logo.png" />
			<figcaption>Les professionnels de l'informatique (pas toujours&nbsp;;))</figcaption>
		</figure>
	</li>
</ul>
</body>
</html>

NOTA: les smileys dans les commentaires ne sont PAS obligatoires ;)

En outre, si l'usage d'une liste n'est pas pertinent dans votre contexte, vous pouvez vous contenter de :

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
 
<!doctype html>
<html lang="fr-FR">
<head>
	<meta charset="UTF-8" />
	<title>Alignement horizontal image + légende</title>
	<style type="text/css">
body {
text-align: center;
}
 
figure {
display: inline-block;
width: 25%;
min-width: 218px;
margin: 1ex;
border: thin solid #333;
}
        </style>
</head>
<body>
	<figure>
		<img alt="Developpez.com" src="http://www.developpez.net/template/images/logo.png" />
		<figcaption>Les professionnels de l'informatique (pas toujours&nbsp;;))</figcaption>
	</figure>
 
	<figure>
		<img alt="Developpez.com" src="http://www.developpez.net/template/images/logo.png" />
		<figcaption>Les professionnels de l'informatique (pas toujours&nbsp;;))</figcaption>
	</figure>
 
	<figure>
		<img alt="Developpez.com" src="http://www.developpez.net/template/images/logo.png" />
		<figcaption>Les professionnels de l'informatique (pas toujours&nbsp;;))</figcaption>
	</figure>
</body>
</html>

23/11/2012, 19h53
laurentSc

Alors pourquoi ça reste vertical ? :cry:
23/11/2012, 21h17
Bovino

CTRL + F5 ? :?
23/11/2012, 22h10
laurentSc

Pareil :cry:

Mais dites-moi, dites-moi… Ne serait-ce pas un problème de support de la propriété display:inline-block ? :)
Vous utilisez quel navigateur, laurentSc ?

À défaut de support, vous pourriez vous tourner vers un code comme ça (ici, j'ai mis des div : ça passe aussi) :

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
 
<!doctype html>
<html lang="fr-FR">
<head>
	<meta charset="UTF-8" />
	<title>Alignement horizontal image + légende</title>
	<style type="text/css">
div {
float: left;
width: 25%;
min-width: 218px;
margin: 1ex;
padding: 0.5ex 0;
border: thin solid #333;
text-align: center;
}
        </style>
</head>
<body>
	<div>
		<img alt="Developpez.com" src="http://www.developpez.net/template/images/logo.png" />
		<p>Les professionnels de l'informatique (pour bientôt&nbsp;!)</p>
	</div>
 
	<div>
		<img alt="Developpez.com" src="http://www.developpez.net/template/images/logo.png" />
		<p>Les professionnels de l'informatique (pour bientôt&nbsp;!)</p>
	</div>
 
	<div>
		<img alt="Developpez.com" src="http://www.developpez.net/template/images/logo.png" />
		<p>Les professionnels de l'informatique (pour bientôt&nbsp;!)</p>
	</div>
</body>
</html>

24/11/2012, 10h10
laurentSc

Parfait Muchos.
Navigateur=IE8.

Je voulais préciser que pour utiliser ton code, j'ai du le modifier un peu :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <style type="text/css"> div.trombi { float: left; width: 4%; min-width: 100px; margin: 1ex; padding: 0.5ex 0; border: 0; text-align: center; } p { font-family:Arial; } </style> <div class="trombi"> <img style="width: 79px; height: 105px;" alt="" src="---.jpg"> <p>bla bla</p> </div> <div class="trombi"> <img src="---.jpg"> <p>bla bla</p> ...
car il ne faut pas que ça touche toutes les divs...et ça a servi à faire un trombinoscope, d 'où le nom de la classe...