How do I prevent a page break between an image and caption?

[Richard5C59]

Using Robohelp version 2020.3.32

Is there a way to ensure that an image and its caption stay together on the same page when generating PDF output? I am looking for something that has the same effect as teh MS Word "Keep with Next" paragraph style. I have tried placing the caption above the image and below. I have tried adding break-after: avoid; and break-before: avoid; (at different times) to an img style in the CSS. I have tried those styles in-line on the caption as well as the image.

From my topic:

<figure>
<figcaption><span data-condition="Output:Manual" >Create Cure Batch screen</span></figcaption>
<img alt="Create Cure Batch screen" data-condition="Output:Manual" height="423" src="../../../assets/images/Operations/CreateCureBatch.png" width="752" />
</figure>

From my CSS:

img {
break-before: avoid;
}

[Amebr · Accepted solution]

You could try break-inside on the figure element.

Or try the older page-break-before/after/inside.

But I don't know what css is supported by the pdf conversion process, so you might need to contact Adobe.

[Peter Grainge]

Does the avoid work in online outputs?

[Richard5C59]

@Amebr Thanks for the suggestion on adding break-inside on the figure element. That did the trick. I knew it was going to be something totally obvious once it was pointed out to me.

[Richard5C59]

@Peter Grainge The project I am working on is for a couple of variants of printed documentation, so I really haven't tried to see if I got the same behaviour in an on-line version.