Comment écrire une légende sous une image ?

Question

J'ai deux images qui doivent rester en ligne ; je veux écrire une légende sous chaque image.

<center>
   <a href="http://example.com/hello">
       <img src="hello.png" width="100px" height="100px">
   </a>
   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
   <a href="http://example.com/hi">
       <img src="hi.png" width="100px" height="100px">
   </a>
</center>

Comment puis-je le mettre en œuvre ?

Answer 1

Les CSS sont vos amis ; vous n'avez pas besoin de la balise centrale (qui est d'ailleurs assez dépréciée) ni des espaces insécables excessifs. Voici un exemple simple :

CSS

.images {
    text-align:center;
}
.images img {
    width:100px;
    height:100px;
}
.images div {
    width:100px;
    text-align:center;
}
.images div span {
    display:block;
}
.margin_right {
    margin-right:50px;
}
.float {
    float:left;
}
.clear {
    clear:both;
    height:0;
    width:0;
}

HTML

<div class="images">
    <div class="float margin_right">
        <a href="http://xyz.com/hello"><img src="hello.png" width="100px" height="100px" /></a>
        <span>This is some text</span>
    </div>
    <div class="float">
        <a href="http://xyz.com/hi"><img src="hi.png" width="100px" height="100px" /></a>
        <span>And some more text</span>
    </div>
    <span class="clear"></span>
</div>

Answer 2

Pour être plus sémantiquement correct et répondre à la question originale de l'OP sur l'alignement côte à côte, j'utiliserais ceci :

HTML

<div class="items">
<figure>
    <img src="hello.png" width="100px" height="100px">
    <figcaption>Caption 1</figcaption>
</figure>
<figure>
    <img src="hi.png" width="100px" height="100px"> 
    <figcaption>Caption 2</figcaption>
</figure></div>

CSS

.items{
text-align:center;
margin:50px auto;}

.items figure{
margin:0px 20px;
display:inline-block;
text-decoration:none;
color:black;}

https://jsfiddle.net/c7borg/jLzc6h72/3/

Answer 3

El <figcaption> en HTML5 vous permet d'ajouter du texte à votre image par exemple :

<figcaption>
Your text here
</figcaption>.

Vous pouvez ensuite utiliser le CSS pour positionner le texte là où il doit être sur l'image.

Answer 4

Légende Sous l'image

<style type="text/css">
.imageHolder {
    position: relative;
    width: 285px;
    height: 175px;
}
.imageHolder .caption {
    position: absolute;
    width: 283px;
    height: 50px;
    bottom: 0px;
    left: 0px;
    color: #ffffff;
    background: green;
    text-align:center;
    font-weight:bold;
    opacity:0.7;
}
</style>

Source complète : Légende sous l'image

Answer 5

<table>
<tr><td><img ...><td><img ...>
<tr><td>caption1<td>caption2
</table>

Coiffez comme vous le souhaitez.