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>
<a href="http://example.com/hi">
<img src="hi.png" width="100px" height="100px">
</a>
</center>
Comment puis-je mettre en œuvre?
Figure et Figcaption tags:
<figure>
<img src='image.jpg' alt='missing' />
<figcaption>Caption goes here</figcaption>
</figure>
Je dois aimer HTML5.
Voir échantillon
#container {
text-align: center;
}
a, figure {
display: inline-block;
}
figcaption {
margin: 10px 0 0 0;
font-variant: small-caps;
font-family: Arial;
font-weight: bold;
color: #bb3333;
}
figure {
padding: 5px;
}
img:hover {
transform: scale(1.1);
-ms-transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
}
img {
transition: transform 0.2s;
-webkit-transition: -webkit-transform 0.2s;
-moz-transition: -moz-transform 0.2s;
-o-transition: -o-transform 0.2s;
}
<div id="container">
<a href="#">
<figure>
<img src="http://lorempixel.com/100/100/nature/1/" width="100px" height="100px" />
<figcaption>First image</figcaption>
</figure>
</a>
<a href="#">
<figure>
<img src="http://lorempixel.com/100/100/nature/2/" width="100px" height="100px" />
<figcaption>Second image</figcaption>
</figure>
</a>
</div>
CSS
#images{
text-align:center;
margin:50px auto;
}
#images a{
margin:0px 20px;
display:inline-block;
text-decoration:none;
color:black;
}
HTML
<div id="images">
<a href="http://xyz.com/hello">
<img src="hello.png" width="100px" height="100px">
<div class="caption">Caption 1</div>
</a>
<a href="http://xyz.com/hi">
<img src="hi.png" width="100px" height="100px">
<div class="caption">Caption 2</div>
</a>
</div>
<div style="margin: 0 auto; text-align: center; overflow: hidden;">
<div style="float: left;">
<a href="http://xyz.com/hello"><img src="hello.png" width="100px" height="100px"></a>
caption 1
</div>
<div style="float: left;">
<a href="http://xyz.com/hi"><img src="hi.png" width="100px" height="100px"></a>
caption 2
</div>
</div>
Mettez l'image - disons que sa largeur est de 140px - à l'intérieur d'un lien:
<a><img src='image link' style='width: 140px'></a>
Ensuite, mettez la légende en a et donnez-lui une largeur inférieure à votre image, tout en la centrant:
<a>
<img src='image link' style='width: 140px'>
<div style='width: 130px; text-align: center;'>I just love to visit this most beautiful place in all the world.</div>
</a>
Ensuite, dans la balise link, attribuez un style au lien afin qu’il ne ressemble plus à un lien. Vous pouvez lui attribuer la couleur de votre choix, mais enlevez simplement le texte décoré par vos liens.
<a style='text-decoration: none; color: orange;'>
<img src='image link' style='width: 140px'>
<div style='width: 130px; text-align: center;'>I just love to visit this most beautiful place in all the world.</div>
</a>
J'ai enveloppé l'image avec sa légende dans un lien afin qu'aucun texte ne puisse la repousser. La légende est écartée: la légende est liée à l'image par le lien. Voici un exemple: http://www.alphaeducational.com/p/okay.html
CSS est ton ami la balise centrale n'est pas nécessaire (pour ne pas dire qu'elle est assez dépréciée), ni les 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>