Properly aligning and wrapping image captions

Share on Facebook1Share on Reddit0Tweet about this on TwitterShare on Google+0

I recently learned a new css trick to align and wrap captions properly to images of unknown size.  This is a common problem when dealing with any content management system that allows users to upload images to pages or articles.

The problem:

This is a caption of slightly longer length. It should wrap, regardless of the size of the image.

The css solution:

This is a caption of slightly longer length. It should wrap, regardless of the size of the image.

Voilà!

Share on Facebook1Share on Reddit0Tweet about this on TwitterShare on Google+0
  • Alberto

    Your post would be better if you said what version of common browsers started supporting those CSS properties.

  • Just when I’d completely given up on solving this, I find this brilliant solution! I can’t thank you enough for sharing this to all of us on the inter-webs. Thank you, thank you, thank you!

    @Alberto – I’ve successfully tested this with the following OS/Browser configs:

    iOS 5.0 & 5.1 – Mobile Safari 5.1
    Mac OSX 10.9 – Firefox 27, Chrome 33, Safari 7
    Windows Vista – IE8, Firefox 27, Chrome 32
    Windows 7 – IE8, Firefox 27, Chrome 33, Safari 5
    Windows 8 & 8.1 – IE10, IE11, Safari 5.1, Firefox 27, Chrome 33

    • mdjasper

      Thanks for your kind words, and testing it on all those browsers! Cheers!