9

I am currently creating an ePUB3 file for converting it to Kindle format, and for it be compatible to other ereading devices that support epub.

For centering images and groups of text, I am using this block of css in ePUB

     margin: 15px auto; 
     padding: 0; 
     text-align: center;

I read while researching that putting the left and right margins as auto and using text-align: center property has the effect of centering block-level elements but that it doesn't work on ADE and other readers based on it due to their inability to properly interpret the auto property. However, in my case, its working, both in ePUB and Kindle devices. Is this something I should be concerned about? Is the way I've done an alright way to do it?

Improve this question

1 Answer 1

Reset to default
12

You will probably run into problems doing it that way, particularly on iBooks. The most reliable method I've found for centering is:

<div class="centered_image">
  <img src="image.jpg" alt="Alternate text" />
</div>

With css like this:

div.centered_image {
  width: 60%;
  margin: 1em 20%;
}
div.centered_image img {
  width: 100%;
}

On a very few reading systems (notably the nook), this can cause problems on some images due (I'm guessing) to rounding errors, so you may have to set the margins just a hair smaller (like 19% in the above example).

Improve this answer
7
  • Thanks, I just tested this, what I find is that the image now occupies the whole page ? On Kindle editions it works nicely (in between paragraphs of text), except for KindleDX on which it occupies the whole page like in epub. Is there a way I could do this so I could fix the width/length of the image according to the ratio w.r.t the width/length of the device ? Also, can I use my above code for centering text, would it cause problems for text too ?
    – QPTR
    Commented May 15, 2014 at 6:26
  • The image should not be occupying the whole page with the above code. Can you post the relevant code? Also, what reading system are you having these issues in?
    – Tom
    Commented May 15, 2014 at 6:31
  • <div class="image_center"><img src="images/image.jpg" alt="text" /></div> And using the above css that you posted just changing the class's name. I am using KindlePreviewer to see in Kindle devices and Adobe DE for epub.
    – QPTR
    Commented May 15, 2014 at 6:39
  • Well, I know the DX is super flaky; I've never actually found a good way to control image width on it. Years ago you could use img hisrc= to get the image sizes to behave, but you can't do that any more. DX formatting is primitive enough that it doesn't bother me, anyway. I'll have to check on ADE tomorrow, I'm afraid--it's late here. Odd that it doesn't work, though.
    – Tom
    Commented May 15, 2014 at 6:49
  • 1
    Sure thing! The width statement applies to the width of whatever is containing the thing that you're setting the width on. So the <div> is set to 40% as wide as the page. That leaves 60% left over. You take up that 60% by giving a 30% margin on each side of the div. The 1em margin on top and bottom is just to give a little extra space. The image itself is set to width: 100%; so it takes up the entire width of the div that it's inside. Oh, and yes, feel free to center text with text-align: center;.
    – Tom
    Commented May 15, 2014 at 22:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.