Image captions and wrapping
Something like this: http://jsfiddle.net/QLcRC/ ?
figure {
display: table;
}
figcaption {
display: table-caption;
caption-side: bottom;
}
<figure>
<img src="https://picsum.photos/200/50" />
<figcaption>This is a caption of slightly longer length. It should wrap, regardless of the size of the image.</figcaption>
</figure>
You can substitute figure
and figcaption
for div
and p
, or whatever other containers float your semantic boat.
Shameless plug: I blogged about this problem and my solution here, if you're interested.
You may use also use the HTML5 figure and figcaption elements and style those as @Wasim suggested.
<figure>
<img src="/test.jpg" alt="a test-image">
<figcaption>Description</figcaption>
</figure>
Another (not-so-cross-browser-savvy) approach is to use the img title-attribute and insert it as a pseudo-element via CSS:
#content img[title]:after {
content: "[" counter(image) "] " attr(title);
counter-increment: image;
display: block;
text-align: center; }