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

**laurentSc** · 23/11/2012, 19h06

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

**Muchos** · 23/11/2012, 20h08

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

**laurentSc** · 23/11/2012, 20h53

Alors pourquoi ça reste vertical ?

**Bovino** · 23/11/2012, 22h17

CTRL + F5 ?

**laurentSc** · 23/11/2012, 23h10

Pareil

**Muchos** · 24/11/2012, 02h32

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

**laurentSc** · 24/11/2012, 11h10

Parfait Muchos.
Navigateur=IE8.

**laurentSc** · 26/11/2012, 15h21

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

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

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

HTML

Discussions similaires

Partager

Partager