Cannot center an image hoirzontally and vertifically In Kindle

Report · Oct 29, 2022

I'm trying to center an image in an epub which I then email to my Kindle mobile app .
No matter what I do I cannot center the image on all screen sizes.
Any ideas as to the CSS I need for the .container and .image classes.
thank you

<body id="The_strangest_thankyou_eBook_ver9b-12" lang="en-US" xml:lang="en-US">
<div class="container">
   <p><img class="imagec" src="image/Woodpecker.png"  alt="Woodpecker" /></p>
</div>

Report · Oct 30, 2022

Not a genius with this stuff but you can insert your own max-height and margin-top values etc.

CSS:
img.verticalCenter {
width: 100%;
max-height: 50%;
margin-top: 40%;
margin-bottom: 30%;

}

HTML
<p style=”text-align: center;”>
<img alt=”index-15″ class=”verticalCenter” src=”../Images/index-15_1.jpg”/>
</p>

Report · Oct 30, 2022

I believe I've already tried this code which is similar to code from another site. Unfortunately it still doesn't center the image on different screen sizes. If I center the images for a mobile I find it isn't centered on a tablet and vice versa.

Is there not a way of centering images for Kindle ePubs where they are displayed in the center for devices with different screen sizes?

These images are NOT surrounded by text. The image should take up the full width of the screen.

Report · Oct 30, 2022

Adaptive/responsive horizontal centering and scaling is fairly trivial, with the right code.

However, it may not be possible to vertically center content on a variety of reader screens using a single EPUB/CSS setting. This is because Kindle/EPUB, like the HTML on which they are based, does not have a vertical page size other than that arbitrarily assigned by the reader, with quirks and glitches. Few EPUB readers read/assign the screen dimensions as browsers do, and Kindle, not at all.

Kindle also does not accept the viewport-relative dimenions (vh and vw, etc.), and using percentage only works from the screen width, not its height.

You can get an approximation of vertical centering by using a page break followed by a good guess at top percentage spacing based on width, but it's going to vary on the three Kindle Previewer screen options and much more so on real world viewers.

Report · Oct 30, 2022

Thanks you for that response. I've been trying to center an image for days only to find it's not possible. I thought I could add a margin of 50% of the viewports total height as meantioned in this article but this is for ibooks:

https://epubsecrets.com/vertically-centered-text-in-ibooks.php

Since most eBooks are read on phones it may make sense to try and center the images for phones that tend to have longer screens.

Unfortunately when viewed on Kindle Previewer I see the bottom end of the images are cut off for Kindle e-reader. Is there any way to ensure this does not happen. I used min-width: 100% as the images appeared to shrink on some devices so I suspect that is the cause of the problem.

Report · Oct 30, 2022

Nearly all EPUB readers are different; standardization is almost wholly lacking except (AFAIK) in Thorium Reader, which has been the go-to proof reader for a long time... except that current versions have a font sizing bug.

The Apple reader, like most, has many proprietary aspects. It should not be used for general EPUB proofing etc. unless you're going to publish only to iBooks. The Adobe reader, ADE, is awful and shouldn't be used at all. 🙂

You can set scaling for images so that they will always fully appear on a reader page, and horizontal centering is simple, but with scaling, all you can get is some variable amount of top spacing, which could push the bottom of the image off the page even if it would otherwise fit.

But yep, nearly all of this traces to Kindle and most EPUB readers having no usable vertical scaling anchor, and the endless variation in both readers (tools) and readers (app settings and choices).

I posted a detailed summary of the image scaling options here a few months back. It can help you choose which scaling option to select for the desired results. I'll see if I can find it...

Here, with a comparative diagram. Ask if you need more details.

Cannot center an image hoirzontally and vertifically In Kindle

1 Correct answer