I have two images that need to kept inline; I want to write a caption under each 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>
How can I implement?
The <figcaption>
tag in HTML5 allows you to enter text to your image for example:
<figcaption>
Your text here
</figcaption>.
You can then use CSS to position the text where it should be on the image.
<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>
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>?
<table>
<tr><td><img ...><td><img ...>
<tr><td>caption1<td>caption2
</table>
Style as desired.
Put the image — let's say it's width is 140px — inside of a link:
<a><img src='image link' style='width: 140px'></a>
Next, put the caption in a and give it a width less than your image, while centering it:
<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>
Next, in the link tag, style the link so that it no longer looks like a link. You can give it any color you want, but just remove any text decoration your links may carry.
<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>
I wrapped the image with it's caption in a link so that no text could push the caption out of the way: The caption is tied to the picture by the link. Here's an example: http://www.alphaeducational.com/p/okay.html
For responsive images. You can add the picture and source tags within the figure tag.
<figure>
<picture>
<source media="(min-width: 750px)" srcset="images/image_2x.jpg"/>
<source media="(min-width: 500px)" srcset="images/image.jpg" />
<img src="images.jpg" alt="An image">
</picture>
<figcaption>Caption goes here</figcaption>
</figure>
Figure and Figcaption tags:
<figure>
<img src='image.jpg' alt='missing' />
<figcaption>Caption goes here</figcaption>
</figure>
Gotta love HTML5.
See sample
#container {_x000D_
text-align: center;_x000D_
}_x000D_
a, figure {_x000D_
display: inline-block;_x000D_
}_x000D_
figcaption {_x000D_
margin: 10px 0 0 0;_x000D_
font-variant: small-caps;_x000D_
font-family: Arial;_x000D_
font-weight: bold;_x000D_
color: #bb3333;_x000D_
}_x000D_
figure {_x000D_
padding: 5px;_x000D_
}_x000D_
img:hover {_x000D_
transform: scale(1.1);_x000D_
-ms-transform: scale(1.1);_x000D_
-webkit-transform: scale(1.1);_x000D_
-moz-transform: scale(1.1);_x000D_
-o-transform: scale(1.1);_x000D_
}_x000D_
img {_x000D_
transition: transform 0.2s;_x000D_
-webkit-transition: -webkit-transform 0.2s;_x000D_
-moz-transition: -moz-transform 0.2s;_x000D_
-o-transition: -o-transform 0.2s;_x000D_
}
_x000D_
<div id="container">_x000D_
<a href="#">_x000D_
<figure>_x000D_
<img src="http://lorempixel.com/100/100/nature/1/" width="100px" height="100px" />_x000D_
<figcaption>First image</figcaption>_x000D_
</figure>_x000D_
</a>_x000D_
<a href="#">_x000D_
<figure>_x000D_
<img src="http://lorempixel.com/100/100/nature/2/" width="100px" height="100px" />_x000D_
<figcaption>Second image</figcaption>_x000D_
</figure>_x000D_
</a>_x000D_
</div>
_x000D_
To be more semantically correct and answer the OPs orginal question about aligning them side by side I would use this:
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;}
CSS is your friend; there is no need for the center tag (not to mention it is quite depreciated) nor the excessive non-breaking spaces. Here is a simple example:
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>
Source: Stackoverflow.com