How can I make the width of my <figcaption> match the width of the <img> inside its <figure> tag?

Question

Say, I got this code:

<figure>  <img src="bunnyrabbit.jpg" width="200" height="150" alt="An image of a bunny rabbit." />  <figcaption>Bunny rabits are cuddly and fluffy creatures with big ears. They eat carrots.</figcaption> </figure> 

If I don't use any CSS the figcaption will expand the width of the figure element beyond 200px. How can I prevent this?

I know I can force the text inside the figcaption to wrap by specifying the width of the figure element (<figure style="width:200px;">) but I don't really want to use this for each and every image.

Answer 1

Adding this Code to <figure> and <figcaption> CSS-Attributes helped me with the same problem. Also, it preserves the responsivenes of your images and captions.

figure { display: table; }   figcaption { display: table-caption; caption-side: bottom ; } 

1. Adding display: table; sets the stage.

2. Adding display: table-caption; alone placed the caption on top of the image, The caption-side property specifies the placement of the table caption at the bottom, top is default.

Answer 2

This will place the figcaption side by side with the img:

figure {     display: table; } img, figcaption {     display: table-cell;     vertical-align: bottom; } figcaption {     padding-left: 4px; } 

Here's an example. However I'm not entirely clear what you're trying to achieve - you say in the question that you want the figure to stay at 200px width, but then you comment that you want the figcaption to appear to the right, which would make the figure wider. If all you want is for the figcaption to be restricted to the width of the image, this should work:

figure {     display: table;     width: 1px; /* This can be any width, so long as it's narrower than any image */ } img, figcaption {     display: table-row; }