Centering images in iPad mini/iBooks/iOS8

[AlexBell]

I rarely use iBooks except for checking ebooks I've designed, so this problem may be old news to some people.

The latest ebook I uploaded uses the following XHTML and CSS to centre images:

<div class="centre">
<img src="images/valid.png"
width="25%" alt="valid html, css, and epub" />
</div>


.centre { text-indent: 0; text-align: center; }

It has worked perfectly well to centre images on an iPad2 in the past, and worked perfectly well tonight on my Sony PRS T3, a Kobo Touch, iPad mini with Marvin, Nexus 7 with Mantano, and upgraded Kindle Keyboard. But on an iPad mini the images are flush with the left margin - not centred at all.

Has anyone else seen this problem? Is it a problem with an iPad mini? Or iOS8 and the latest version of iBooks? I can't believe it's because of my markup and CSS since they worked in the past and work on other ebook readers.

Perhaps more importantly: is there a way to centre images with this combination (iPad mini, latest iBooks, and iOS8) that will also work on other ebook readers?

I should mention perhaps that an image which is floated right and has text wrapped around it still works on the iPad mini. And the CSS still centres text material on an iPad mini.

If you need to check the markup and the CSS the book is Right at Last and Other Tales by Elizabeth Gaskell.

[roger64]

mistake

[odedta]

Google search for centering a div

[RbnJrg]

Images are not the same as text. It's possible that ereaders will display images centered using the text-align property but it’s not a good idea. Instead, you should specify that the image is a block element. Then you can center it as you would a block:

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

and

<div class="centre">
       <img class="centered" alt="valid html, css, and epub" src="../Images/valid.png" width="25%" />
</div>

I think that should work on iBooks

Regards
Rubén

[adv_dp_fan]

I think this is a bug in the new iOS 8.0.2 release of iBooks. I'm having other cover related issues with iBooks now and nothing, not even the above css seems to work. At this point I'm just waiting on 8.1 to hit and see if that fixes it.

<rant>
This is one problem with how Apple decided to make iBooks a part of iOS, you now have to wait on an update of the whole system just to get bugs fixed in one app. And you can't remove apps you don't need. Apple is becoming as bad as the phone providers when it comes to bloatware.
</rant>

[Toxaris]

Originally Posted by RbnJrg

Images are not the same as text. It's possible that ereaders will display images centered using the text-align property but it’s not a good idea. Instead, you should specify that the image is a block element. Then you can center it as you would a block:

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

and

<div class="centre">
       <img class="centered" alt="valid html, css, and epub" src="../Images/valid.png" width="25%" />
</div>

I think that should work on iBooks

Regards
Rubén

This would not work on the majority of the readers out there. The auto value is converted to 0 for margins on those. That is not even a mistake, the specs allow that.

In iBooks it could work.

[Jellby]

Originally Posted by RbnJrg

Images are not the same as text. It's possible that ereaders will display images centered using the text-align property but it’s not a good idea.

They should be the same if they are inline elements. And note that the text-align property is applied to the container, not to the <img>. This should work in a compliant renderer (in the absence of other rules).

[RbnJrg]

Originally Posted by Jellby

...And note that the text-align property is applied to the container, not to the <img>...

Yes, of course. For that reason I added the class "centered" to the image tag. The div tag retains the class "center" (Alex's original) so the epub will continue working on the ereaders where already works and by adding the class "centered" to the <img> tag now it should also work in iBooks. At least, that is the idea

[RbnJrg]

Originally Posted by Toxaris

This would not work on the majority of the readers out there. The auto value is converted to 0 for margins on those. That is not even a mistake, the specs allow that.

In iBooks it could work.

Yes, you are right. For that reason I retained the Alex's class "center". Read my previous post.

[AlexBell]

Thanks for all the suggestions.

Is there anyone around who uses an iPad and iBooks and can tell me whether they've had the same or similar problems? The exact same markup and stylesheet that I've quoted worked on an iPad some time ago, and I'd really like to know what has made the difference.

[AlexBell]

This is late, I know, but I realised that the problem might be that the markup in my first post does not set the img to display: inline.

I added this to the CSS file

div.centre img { display: inline; }

and the images are centered in iBooks as well as all the other readers.

I'm afraid I don't know enough about CSS to know whether iBooks is being too strict in requiring that the image display: inline, or whether ADE and Marvin is being too lax in not requiring this. Any comments?

[mikelv]

Originally Posted by AlexBell

This is late, I know, but I realised that the problem might be that the markup in my first post does not set the img to display: inline.

I added this to the CSS file

div.centre img { display: inline; }

and the images are centered in iBooks as well as all the other readers.

I'm afraid I don't know enough about CSS to know whether iBooks is being too strict in requiring that the image display: inline, or whether ADE and Marvin is being too lax in not requiring this. Any comments?

"display:inline" shouldn't be necessary, because the img element is per definition an inline element. So in my opinion this is a bug in the iOS renderer.

[AlexBell]

Originally Posted by mikelv

"display:inline" shouldn't be necessary, because the img element is per definition an inline element. So in my opinion this is a bug in the iOS renderer.

Thanks.

I'm not too surprised: I can remember the days when one had to scatter unnecessary <span></span>s around to get ePubs to work properly in iBooks.

[adv_dp_fan]

Just updated my my iPad mini to iOS 8.1 and it fixed the issues I was having with iBooks. Might check yours again.

[AlexBell]

Originally Posted by adv_dp_fan

Just updated my my iPad mini to iOS 8.1 and it fixed the issues I was having with iBooks. Might check yours again.

Thanks, I'll give that a try. At least my solution won't do any harm even if it is unnecessary. And perhaps it will prevent problems with the next iOS update.