Answers.Body: <p>The right alignment results from the <code>margin-left:16.5528%</code> in the span surrounding the image. I am not sure if you can change that in Apple Pages. 
  I would experiment with Position (at the bottom of your screen) essentially
  there should be no position in cm associated to something centered, as you
  cannot know (in an ePub) the width of the page up-front.</p>
  
  <p>If you cannot switch that off, you can resort to cleaning the epub with a script, this seems easy enough to find (e.g. using CSS locater <code>span &gt; img</code> and changing the style on the parent of that <code>img</code>)</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-08-07T22:30:06.113Z
Answers.Text: Thanks for the information! I don't think I can change the CSS in Apple Pages and I don't really get the problem, since I have selected "center" as the alignment.
  
  Is it okay to edit the document by manually changing the CSS code? In other words: will it work on all devices, or is it considered "not done"?
Answers.UserDisplayName: Jelle
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-08-07T22:32:39.750Z
Answers.Text: Sure you can edit the CSS code, this is just wrongly generated code that needs fixing. Problem is that you have to do 150 image entries in multiple files, so I would not want to do that by hand.
Answers.UserDisplayName: Anthon
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-08-06T12:37:17.963Z
Answers.LastActivityDate: 2016-08-06T12:43:27.213Z
Answers.LastEditDate: 2016-08-06T12:43:27.213Z
Answers.UserDisplayName: Anthon
Body: <p>I am using Apple Pages to create an eBook (I know I should have used InDesign, I will use it for the next one!). All the text is there, I have used headings and I am very pleased with the result. However... When I export it to ePub, the images are not centered. They are centered when using PDF. Have a look at my image settings in Pages in the following screenshot:</p>
  
  <p><a href="https://i.sstatic.net/fLXkl.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/fLXkl.png" alt="My image settings in Pages"></a></p>
  
  <p>The image (this is one example, but all +150 images are shown this way) is aligned in the center using the "Align" function you can see at the right, but when I select "Center", it does not move (because it is in the center already) and it switches back to Align. I am not sure whether this is good or bad.</p>
  
  <p><a href="https://i.sstatic.net/0aXiz.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/0aXiz.png" alt="Preview of the eBook using Apple iBooks on Mac"></a></p>
  
  <p>As you can see, the image is aligned to the right when I export the book to ePub and open it with Mac iBooks. It looks exactly the same on my iPad / iPhone. The image is cutoff as well: look at the difference between the images shown in the screenshots I added in this post.</p>
  
  <p>How can I get the ePub images to be centered?</p>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2016-08-06T11:44:20.733Z
Comments.Text: Do all images in ePub have the same distance from the margin (i.e. independent of their width)? If so you might have a CSS problem that generates too much margin. Have you looked the HTML that was generated c.q. can you update your post with a relevant part of the HTML extracted from your ePub?
Comments.UserDisplayName: Anthon
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2016-08-06T11:44:53.263Z
Comments.Text: En niet te vergeten: welkom bij ebook.stackexchange.
Comments.UserDisplayName: Anthon
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2016-08-06T12:18:27.380Z
Comments.Text: Hi Anthon, thanks! :-) The code (this is the image I used in the screenshots!)
  
  `<p class="s5">Niet iedere hostingprovider heeft Installatron geïnstalleerd. Meer informatie over￼</p><p class="s5" style="text-align:left;text-indent:0;"><span style="display:inline-block;margin-bottom:2.5079%;margin-left:16.5528%;margin-right:0.0000%;margin-top:2.5079%;text-indent:0px;vertical-align:baseline;width:26.957em;"><img src="images/164.jpg" alt="164.jpg" style="width:26.957em;"/></span></p>`
Comments.UserDisplayName: Jelle
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2016-08-06T12:32:37.777Z
Comments.Text: Better to "improve" your post by editing in extra information there, among other things you cannot format text in a comment, nor can thing be corrected there by others (e.g. typos).
Comments.UserDisplayName: Anthon
Tags: <epub><image>
Title: Centering images in ePub made with Apple Pages
UserDisplayName: Jelle
ThreadText: # Centering images in ePub made with Apple Pages
  
  (Asked by: username_0 on 2016-08-06)
  
  I am using Apple Pages to create an eBook (I know I should have used InDesign, I will use it for the next one!). All the text is there, I have used headings and I am very pleased with the result. However... When I export it to ePub, the images are not centered. They are centered when using PDF. Have a look at my image settings in Pages in the following screenshot:
  
  [![My image settings in Pages](https://i.sstatic.net/fLXkl.png)](https://i.sstatic.net/fLXkl.png)
  
  The image (this is one example, but all +150 images are shown this way) is aligned in the center using the "Align" function you can see at the right, but when I select "Center", it does not move (because it is in the center already) and it switches back to Align. I am not sure whether this is good or bad.
  
  [![Preview of the eBook using Apple iBooks on Mac](https://i.sstatic.net/0aXiz.png)](https://i.sstatic.net/0aXiz.png)
  
  As you can see, the image is aligned to the right when I export the book to ePub and open it with Mac iBooks. It looks exactly the same on my iPad / iPhone. The image is cutoff as well: look at the difference between the images shown in the screenshots I added in this post.
  
  How can I get the ePub images to be centered?
  
  **Tags:** epub, image
  
  > **Comments:**
  > **username_1**: Do all images in ePub have the same distance from the margin (i.e. independent of their width)? If so you might have a CSS problem that generates too much margin. Have you looked the HTML that was generated c.q. can you update your post with a relevant part of the HTML extracted from your ePub?  
  > **username_1**: En niet te vergeten: welkom bij ebook.stackexchange.  
  > **username_0**: Hi username_1, thanks! :-) The code (this is the image I used in the screenshots!)  `<p class="s5">Niet iedere hostingprovider heeft Installatron geïnstalleerd. Meer informatie over￼</p><p class="s5" style="text-align:left;text-indent:0;"><span style="display:inline-block;margin-bottom:2.5079%;margin-left:16.5528%;margin-right:0.0000%;margin-top:2.5079%;text-indent:0px;vertical-align:baseline;width:26.957em;"><img src="images/164.jpg" alt="164.jpg" style="width:26.957em;"/></span></p>`  
  > **username_1**: Better to "improve" your post by editing in extra information there, among other things you cannot format text in a comment, nor can thing be corrected there by others (e.g. typos).  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2016-08-06. Score: 1
  
  The right alignment results from the `margin-left:16.5528%` in the span surrounding the image. I am not sure if you can change that in Apple Pages.
  I would experiment with Position (at the bottom of your screen) essentially
  there should be no position in cm associated to something centered, as you
  cannot know (in an ePub) the width of the page up-front.
  
  If you cannot switch that off, you can resort to cleaning the epub with a script, this seems easy enough to find (e.g. using CSS locater `span > img` and changing the style on the parent of that `img`)
  
  > **Comments:**
  > **username_0**: Thanks for the information! I don't think I can change the CSS in Apple Pages and I don't really get the problem, since I have selected "center" as the alignment.  Is it okay to edit the document by manually changing the CSS code? In other words: will it work on all devices, or is it considered "not done"?  
  > **username_1**: Sure you can edit the CSS code, this is just wrongly generated code that needs fixing. Problem is that you have to do 150 image entries in multiple files, so I would not want to do that by hand.  
  
  ---
  
  