Skip to main content
S
Simonpeter
Participating Frequently
October 29, 2022
Answered

Cannot center an image hoirzontally and vertifically In Kindle

  • October 29, 2022
  • 2 replies
  • 1447 views
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>
This topic has been closed for replies.
Correct answer James Gifford—NitroPress

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.

 

2 replies

James Gifford—NitroPress
James Gifford—NitroPress
Legend
October 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.

 

    S
    SimonpeterAuthor
    Participating Frequently
    October 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. 

     

    James Gifford—NitroPress
    James Gifford—NitroPressCorrect answer
    Legend
    October 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.

     

    E
    Community Expert
    Eugene TysonCommunity Expert
    Community Expert
    October 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>

    S
    SimonpeterAuthor
    Participating Frequently
    October 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.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices