Can I float an image to the top or the bottom of the screen?

Question

Is there a way to create floating images for Kindle (or for any eBook format) that float up to the top or down to the bottom of the screen/page?

I have a written children's book for my daughter, with some illustrations. I'd like to make a Kindle version of it for her, since she has a Kindle, but I'm worried about how the illustrations affect the flow of the text.

I understand how to include images and have them appear in-line, or directly after the paragraph in question. But the risk is that at a given font size, the image may be large enough to overflow onto the next screen, causing a big gap in the text.

What I'd like to do is attach an image to a paragraph such that it appears at the top of the screen that that paragraph starts on, no matter what size the font is or where on the screen the paragraph itself appears, and not to have any gaps in the text. I appreciate that it's not quite that simple -- there need to be rules for what if having the image present pushes the paragraph onto page p+1 but omitting it pushes the paragraph onto page p -- but I assume those layout rules could be worked out too.

I understand that you can create floating images, but my understanding is that they float left or right but not up or down.

Answer 1

You can't float to top or bottom. But you can use the CSS break-before property to ensure a page-break before your pictures. Obviously, this will put pictures at the top of the page.

Answer 2

I cant add comment to yours so I will give you answer.

ePub is reflowable format and that mean you shouldn't force how it flows. From my personal experience the book looks better as ePub less you force its layout. Answer given by @Hugh is only viable one unless content do not demand strict layout for context. In that case you may be interested in fixed-layout ePub. But be aware that most e-ink base readers can't read them good if at all.