Hi.
I faced the issue with breaking between image and text inside div which has page-break-inside:avoid property.
Could it be somehow solved or fixed?
Thank you.
div:
Code:
<div class="Figure" id="Ferrier-ch001-fig012">
<p class="fig-img"><img src="Image00018.jpg" alt="Ferrier7e-ch001-image012"/></p>
<p class="FigTitle"><span class="fignum">Figure*1.12</span> The Henderson-Hasselbalch equation is used to predict: (A) changes in pH as the concentrations of bicarbonate (HCO<sub>3</sub><sup>−</sup>) or carbon dioxide (CO<sub>2</sub>) are altered and (B) the ionic forms of drugs.</p>
</div>
Figure CSS
Code:
div.Figure
{
-webkit-column-break-inside: avoid !important;
page-break-inside: avoid !important;
break-inside: avoid !important;
margin: 1.5em 0em 1.5em 0em;
}
fig-img CSS
Code:
p.fig-img
{
text-align:center;
margin: 10px;
}
FigTitle CSS
Code:
p.FigTitle
{
text-align:justify;
font-size: inherit;
margin:0em 0em 0em 0em;
padding:0.15em 0em 0em 0em;
text-indent:0em;
border-top:2px solid black;
}