How to Keep Images and Captions Together in eBooks

I've come across this question a lot. How do I keep the captions below my images (or tables, figures, etc)?

As you know, eBooks don't have set 'pages', the text flows. The user can change the font, the size, and the margins of the text. So, what happens when your image is at the bottom of the screen and there's no room below it? Well, the caption is pushed to the top of the next screen. Many people don't like this, and I understand. The caption is supposed to stay with the image, that's why it's there.

The sad conclusion I've come to (after much research and experimenting) is that there is no easy way to keep the two together that will work on all devices or programs.

The first thing I tried was the html property "page-break: avoid".

You may use it in this manner:
<div style="page-break-inside: avoid">
<img src="../Images/example.jpg">
<p>This is the caption below the image</p>
</div>

This should cause those items within the "div" to not break across pages. Therefore the image and caption should stay together.

Note that I said should. I tried this method, and I found that whether it works or not depends on the device/program you use. Some would honor it, others wouldn't. Sadly, Amazon/Kindle does not honor this code.

At the time I was trying to code a Kindle book, so it was on to something else. I went to Amazon's website and found what html/css codes they support. If you're curious you can check it out here:
Supported HTML in eBooks in General
Supported HTML/CSS in KF8 eBooks

I found the codes "figure" and "figcaption" in the KF8 supported html. I thought maybe that would keep the two elements together. Unfortunately, in my tests it did not. I even tried combining the 'figure/figcaption' with the 'page-break-inside: avoid'. But, it still didn't work.

So in the end, the only method I've found that works right now (this may change in the future) is to place the caption within the image file.

To do this, open your image in some image editing program. GIMP is free and available for multiple operating systems. Add a little white space under your image and use the text tool to type in your caption.

One thing to keep in mind while using this method is that the text is now part of the image, which means the text will scale with the image. When your image appears very small (think about reading on an iPhone screen) the text will be very small as well. There's not much you can do about this. Try to make the text large enough to read on the majority of screens.

The good news it that this method will work on all devices/programs.