CSS: Center Images Using Display:Block and Margin

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="...">
Castle Rock, John Day Area, Oregon
Castle Rock, John Day Area, Oregon

CSS for all images to be centered

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

HTML

<IMG src="..." alt="...">

This Post Has 2 Comments

  1. This will work nicely if preview with Caliber, but it will not work with Adobe Digital Editions. Hence, not very useful…

    1. 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.

Leave a Reply

Close Menu

Welcome to Summer: COUPON DISCOUNTS: SAVE10: Save $10 off $50 or more •• SAVE20 Save $20 off $100 or more Dismiss

×
×

Cart