How to center an image vertically

[Hitch]

Originally Posted by Turtle91

The code I mentioned above works for me. However you need to use it properly....short paragraphs...typically only a line or two that you could actually discern as being v-centered - especially on a small screen. There is a difference between position:absolute and position:fixed.

We've been retesting this, because none of us could remember why we weren't using it. Obviously, it was never going to work in KF7 (yes, yes, I know, this is the ePUB subform, not mobi, but, shrug, realistically....). We're having unexpected (and not great) results in the Paperwhite family of devices, and of course, as someone else mentioned, ADE seems to not love it, either.

Will report more later.

Hitch

[RbnJrg]

The best way to center an image in a "box" (any box, body, div, etc., etc.) is to set the picture as background of the box. It's easy to control the size and the position (virtually one can put the image wherever, not only in the center). I had posted the method a couple of month ago and it works flawlessly under ADE:

https://www.mobileread.com/forums/sh...54&postcount=3

In the post appointed by the previous link, I chose as "background-size: contain" but one can use any size. The same with position. In the post I chose "center top" but one can use "center center" or "10% 65%" or whatever.

In readers based on Webkit (that is, Kindle, but only modern Kindles, those ones who support .kf8 because this method is not for K2 or KDX -I must say this since otherwise Hitch will be angry with me ), it's neccesary for us to add the property "background-attachment: fixed;" and all will work perfectly. Also that property must be added to work in Sigil (but beware, if we add the property in RMSDK/ADE engines, then the method won't work).