Resizing & Centering Images in iBooks

Liz Castro provided a technique on her blog for dealing with iBooks’ stubborn image resizing issue. Unfortunately, from my experience, applying margin: 0 auto; to the image’s containing div does not seem to center the div as it would in a web browser.

Yesterday, I was fumbling around attempting to center a relatively sized image when I attempted setting a left margin as a percentage and it worked! When setting a relative image width (such as 50%), create a left margin that is half of the remaining page width. In the example below the image width is 50% of the screen so the left margin is set to 25%.

Here’s the HTML:

<div class="illustration">  
  <img src="images/sample.jpg" />
</div>  

And the CSS:

div.illustration {  
  margin-left: 25%;
  width: 50%;
}

img {  
  width: 100%;
}

Works well in Adobe Digital Editions (and presumably the Nook as well).