Image caption width to same as image

Question

How can I make image caption width same as image? Now I have the following code:

    
    &         


        
      

Answer 1

The key is to treat the image as having a certain width some length. In the example below I checked and my image was 200px wide. And then treat the caption as an inline-block.

HTML:

   
   
This can be as long as you want.

CSS:

.caption {
   display: inline-block;
}

You can also replace the inline-block with text that is left justified, right, or stretched over the exact image width by replacing above css with one of the following:

.caption {
   /* text-align: left; */
   /* text-align: right; */
   text-align: justify;
}