I found this thread and was hopeful this would solve my problem! I have images with a text caption and I want to make sure the caption and image are on the same page. I am targeting the iPad (but would prefer a generic solution). Here is a sample:
CSS:
Code:
div.figure {text-align: center; margin-bottom: 1em; margin-left: 10%; margin-right: 10%; page-break-inside: avoid;}
img.figure_image {border: 1px solid #808080; }
p.figure_caption {text-align: center; font-weight: bold; font-size: .9em; margin-top: .5em; margin-bottom: 0em;}
XHTML:
Code:
<div class="figure">
<img class="figure_image" src="../Images/Figure%203-1.jpg" />
<p class="figure_caption">Figure 3-1 – The Brass Frame Reel with Friction Drag</p>
</div>
This does not appear to work on iPad and I have no other reader to test. Any help or ideas appreciated!
cheers,
Michael