Answers.Body: <p>You will probably run into problems doing it that way, particularly on iBooks. The most reliable method I've found for centering is:</p>
  
  <pre><code>&lt;div class="centered_image"&gt;
    &lt;img src="image.jpg" alt="Alternate text" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>With css like this:</p>
  
  <pre><code>div.centered_image {
    width: 60%;
    margin: 1em 20%;
  }
  div.centered_image img {
    width: 100%;
  }
  </code></pre>
  
  <p>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).</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-05-15T06:26:24.420Z
Answers.Text: 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 ?
Answers.UserDisplayName: QPTR
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-05-15T06:31:22.313Z
Answers.Text: 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?
Answers.UserDisplayName: Tom
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-05-15T06:39:53.507Z
Answers.Text: <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.
Answers.UserDisplayName: QPTR
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-05-15T06:49:01.547Z
Answers.Text: 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.
Answers.UserDisplayName: Tom
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-05-15T18:20:17.367Z
Answers.Text: 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.
Answers.UserDisplayName: Tom
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-05-15T21:57:54.450Z
Answers.Text: 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 ?
Answers.UserDisplayName: QPTR
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-05-15T22:02:28.600Z
Answers.Text: 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;`.
Answers.UserDisplayName: Tom
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-05-14T17:36:02.187Z
Answers.LastActivityDate: 2014-05-14T17:36:02.187Z
Answers.UserDisplayName: Tom
Body: <p>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.</p>
  
  <p>For centering images and groups of text, I am using this block of css in ePUB</p>
  
  <pre><code>     margin: 15px auto; 
       padding: 0; 
       text-align: center;
  </code></pre>
  
  <p>I read while researching that putting the left and right margins as auto and using <code>text-align: center</code> 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?</p>
  
Tags: <kindle><epub><css>
Title: Centering images and text in ePUB and Kindle ebooks
UserDisplayName: QPTR
ThreadText: # Centering images and text in ePUB and Kindle ebooks
  
  (Asked by: username_0 on 2014-05-14)
  
  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?
  
  **Tags:** kindle, epub, css
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2014-05-14. Score: 12 | Accepted answer
  
  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).
  
  > **Comments:**
  > **username_0**: 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 ?  
  > **username_1**: 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?  
  > **username_0**: <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.  
  > **username_1**: 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.  
  > **username_1**: 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.  
  > **username_0**: 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 ?  
  > **username_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;`.  
  
  ---
  
  