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

CSS for all images to be centered

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

HTML

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