Floated Image Captions
In Fixed Width Parent
Image Title
Floated image captions can be problematic since floats will snag on each other with unequal heights.
Image Title
When a float on a new line meets a float that is taller than the last float on the previous line it will snag unless it is cleared.
Image Title
This caption has less text, this will cause floats to snag if they are not cleared.
Image Title
This is the first float on the new line. This div has been cleared so it does not snag on the middle float above.
Image Title
As you can see floated captions do work but it takes a lot of extra effort and they really only work best in a fixed width parent.
Image Title
A much better way to do image captions is with inline-block. It allows you to center them with text-align and vertical align can be used also.