Centering images can add a special design appeal to your ebook formatting. This can be applied book-wide (to all images) or applied individually. The easiest way to center images is to make the image a block of its own and set the margins to ‘auto’.
Here is an example:
CSS
img.individual {
display: block;
margin-left: auto;
margin-right: auto;
}
HTML
<IMG class="individual" src="..." alt="...">
CSS for all images to be centered
img {
display: block;
margin-left: auto;
margin-right: auto;
}
HTML
<IMG src="..." alt="...">
This will work nicely if preview with Caliber, but it will not work with Adobe Digital Editions. Hence, not very useful…
This CSS is for targeting the top major e-readers and apps, such as iPad, Kindle and Nook. Calibre is not a reading app — it is a conversion program and does not always product a well formatted and styled design. ADE is horribly antiquated and flawed not accepting some very most basic of HTML.
It is very hard to create a CSS file that will work for EVERY e-reader and device. Each has their own levels of code ability. To ensure perfect readability across every device and app, you would have to create one file with CSS for every one — a lot of work.
For the top readers / apps, Kindle, iPad and Nook, this CSS works very nicely.