1 pièce(s) jointe(s)
Placer un texte sous une image
Bonjour !
Suite à des recherches sur le net, je suis tombé sur ce sujet, Mettre un texte sous une image, qui m'a bien aidé !
Seulement, il ne manque qu'un petit détail pour que je solutionne mon problème !
Pièce jointe 376872
J'ai réussi à mettre les deux images côte à côte, comme dans l'entouré rouge, grâce à ce morceau de CSS :
Code:
1
2
3
4
| .imageCentre {
text-align:center;
display:inline-block;
} |
Mais je n'ai pas pu mettre de texte sous chaque image comme je l'avais fait dans l'entouré vert ! Ce sont deux méthodes différentes que j'ai piochées, et impossible pour moi de "fusionner" les deux, car mon niveau de codage est aussi élevé que le niveau de grammaire d'un analphabète..
Je vous donne le CSS et l'HTML des deux entourés :
CSS rouge :
Code:
1
2
3
4
| .imageCentre {
text-align:center;
display:inline-block;
} |
HTML rouge :
Code:
1
2
3
4
5
6
7
8
9
| <div class="imageCentre">
<a href="Electrique/1-direction.jpg" target="_blank"><img src="Electrique/1-direction.jpg" alt="" width="40%" height="auto"></a>
<a href="Electrique/1-direction.jpg" target="_blank"><img src="Electrique/1-direction.jpg" alt="" width="40%" height="auto"></a>
</div> |
CSS vert :
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
| #ul_liste li { /* liste */
display:inline-block;
list-style-type:none;
list-style-position:inside;
width:120px;
padding:5px;
text-align:center;
vertical-align:top;
}
#ul_liste li img { /* image */
width: 100%;
height: auto;
}
#ul_liste li span { /* texte */
width:120px;
font-size:1em;
color:blue;
}
li {
display: inline;
} |
HTML vert :
Code:
1
2
3
4
| <ul id="ul_liste">
<li><a href="Electrique/1-direction.jpg"><img src="Electrique/1-direction.jpg" alt="jeux" width="40%"><br/><span>Texte 1</span></a></li>
<li><a href="Electrique/1-direction.jpg"><img src="Electrique/1-direction.jpg" alt="jeux" width="40%"><br/><span>Texte 2</span></a></li>
</ul> |
En récapitulatif, je désire donc mettre un texte sous chaque image de l'entouré rouge, mais qu'il reste centré et ne déborde pas sur l'autre image s'il est trop long, qu'il revienne à la ligne en cas !
Merci d'avance !
