Howdy, GG:
Well, I'm amazed--my guess was right. I haven't seen this in a good while, so I didn't expect it to be.
The tl;dr answer is: it's WHERE the link targets are located, that is causing your problem.
In your file, you have (using the first illo as an exemplar):
Code:
<a href="../Text/ch07.xhtml#cwa-01">Where roads branch or cross there are signboards....</a>
</div>
...in which the link goes to the "cwa-01" id, in the target. At the target, you have:
Code:
<div class="illus">
<img alt="" class="img095" id="cwa-01" src="../Images/cwa-01.jpg"/> <div>
WHERE ROADS BRANCH OR CROSS<br/>
THERE ARE SIGNBOARDS….
</div>
</div>
The anatomy of the target being a div class that carries the "text-align:center" instruction for the div, plus some font size and margins, and the image has the "095" styling applied (a 2.5% l/r margin, a width setting in percentages and the max/min width settings).
Because we're talking mobi here, we have to read everything devoutly left-right, top-bottom. When the link at the TOI is clicked, the target jumps you PAST the styling for a centered image. So the centered styling simply isn't encountered and thus never rendered. When you page to it, the styling for the centering
is encountered and rendered, before you "get there," as it were.
This was a "thing" (I hesitate to call it a bug; or even a glitch. After all, it's doing exactly what it's being told to do...) with MOBI way back, when the armies of self-pubs first started making mobi files from Word. Or even "filtered HTML." They'd set the target links for their chapter heads at or inside the heading classes, much the same as it's set in your image coding, with the centering instruction BEFORE the inbound--so when they would jump to the chapter from the TOC, the headings would be left-aligned (the default H/p styling) but when they paged to it, they'd be centered.
Does all that make sense? And isn't it nice to know that it's not whacky at all--it's not you? :-) It's just de MOBI, mon!
Hitch