-
-
Save elmimmo/00b5a2bc8e58287f8078 to your computer and use it in GitHub Desktop.
| <?xml version="1.0" encoding="UTF-8"?> | |
| <!DOCTYPE html> | |
| <html xmlns="http://www.w3.org/1999/xhtml"> | |
| <head> | |
| <meta charset="UTF-8"/> | |
| <title>Centering images in ebooks</title> | |
| <!-- <link rel="stylesheet" type="text/css" href="style.css"/> --> | |
| <style type="text/css"> | |
| .center-image { | |
| margin: 1em auto; | |
| text-align: center; | |
| } | |
| .center-image .image { | |
| display: inline-block; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .image img { | |
| display: block; | |
| width: 100%; | |
| height: auto; | |
| margin: 0 auto; | |
| } | |
| .width-100 { | |
| width: 100%; | |
| } | |
| .width-66 { | |
| width: 66%; | |
| } | |
| .width-40px { | |
| width: 40px; | |
| padding: 0 10px 10px 10px; | |
| box-sizing: content-box; | |
| } | |
| </style> | |
| <!-- <link rel="stylesheet" type="text/css" href="responsive.css"/> --> | |
| <style type="text/css"> | |
| /* Instead of embedding this CSS in here, it should reside in an external stylesheet (as commented out right above) so that other styles survive in ADE */ | |
| @media only screen and (max-width: 100ex) { | |
| .width-66 { | |
| width: 90%; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <p>100% wide image:</p> | |
| <div class="center-image"> | |
| <div class="image width-100"> | |
| <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=" alt=""/> | |
| </div> | |
| </div> | |
| <p>66% wide image for standard viewports; 90% wide for small ones:</p> | |
| <div class="center-image"> | |
| <div class="image width-66"> | |
| <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=" alt=""/> | |
| </div> | |
| </div> | |
| <p>Centered group of inline images:</p> | |
| <div class="center-image"> | |
| <div class="image width-40px"> | |
| <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=" alt=""/> | |
| </div> | |
| <div class="image width-40px"> | |
| <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=" alt=""/> | |
| </div> | |
| <div class="image width-40px"> | |
| <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=" alt=""/> | |
| </div> | |
| <div class="image width-40px"> | |
| <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=" alt=""/> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
It did not work in ADE 4.0, but does work in ADE 4.0.3, so I updated the compatibility notes in the comment above.
Found defect in Google Play Books for web (2015-02), so I updated the compatibility notes in the comment above.
Noticed that Kindle Fire HDX has the same issue as Google Play Books for Android, incorrectly mapping CSS pixels to hardware pixels, so I updated the compatibility notes.
Has anything changed in 2025? I'm trying to set up images in my book but running into conflicting advice. Apple's formatting advice doesn't mention anything about centering images, but suggests using text-align:center for video. https://help.apple.com/itc/applebooksstoreformatting/en.lproj/static.html... But that is just apple's case, I would be interested to know if anything has changed for other devices too...
Tested and works in:
@mediafragment—see below) .Catches:
Adobe Digital Editions 1.7.2 (and 2, although this particular markup was not explicitly tested on it) not only do not support CSS media queries, but will ignore a whole stylesheet that includes one. The
@mediaCSS fragment must therefore be linked to as a separate external stylesheet after the base styles (as commented out in the markup), so that ADE does use those at least.Google Play Books for web (2015-02) messes the width of images for which a variable width dependent on a media query was specified, as is the case of the 2nd example ("66% wide image for standard viewports; 90% wide for small ones").
In this example, the ereader injects inline CSS width & height px-based values to the
imgelement that are always equivalent to 90% of the parent's width in pixels, even though, if anything, it should be 66% when the media query is not triggered (or, rather, no value at all since our CSS would work fine). The parent's width is still affected by our media query, therefore causing the contained image to overflow and appear uncentered.Google Play Books for Android and KF8-compatible Kindles (well, observed in Kindle Fire HDX do not size CSS pixels appropriately, instead using that value for hardware pixels (tested on a 2013's Nexus 7). Image widths sized in CSS pixels therefore result in tinier than intended when displayed on displays with a high pixel density (HDPI or higher).
Mobipocket-only (i.e. non-KF8) compatible Kindles display all images at width 100% of the viewport no matter the specified CSS width. The "centered row of inline images", then, do not display as inline (as each occupies the whole width of the viewport), but one below the other.
Works in Kindle for Mac. Not in Kindle for iOS, as observed with the AZK file that Kindle Previewer produces for previewing purposes. The reliability of such preview, though, as compared to how an ebook purchased and downloaded from the Kindle store displays, is questionable, so I cannot say for a book obtained from Amazon.