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?

Jason Down
  • 3,066
  • 1
  • 20
  • 43
QPTR
  • 703
  • 1
  • 7
  • 14

1 Answers1

11

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

Tom
  • 4,648
  • 2
  • 17
  • 33
  • 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 May 15 '14 at 06: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 May 15 '14 at 06:31
  • text 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 May 15 '14 at 06: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 May 15 '14 at 06:49
  • I just created an epub file with <div class="image"><img /></div> and css that specifies div.image { margin: 1em 30%; width: 40%; } img { width: 100%; } and it works fine in ADE for me. Try running your CSS file through a validator to be sure there's no stray characters screwing up the CSS file. I've had a : instead of a ; screw up the entire CSS file in ADE before. – Tom May 15 '14 at 18:20
  • Thanks, it works better with width:40% ! its not occupying the whole of page anymore. Could you please explain a bit how does the above css achieve the centering effect ? Also, is it fine if I just use p.para_center {text-align:center;} for centering text ? – QPTR May 15 '14 at 21:57
  • 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 May 15 '14 at 22:02