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 only way to do captioning properly is to enclose the image and caption in a table constructed from span elements with table, table-row and table-cell css attributes.

Any other method (including HTML5 figure tags) either gives width mismatches or causes unwanted line breaks.

If your method must work in a non-css3 browser, then a table is probably the best bet.