How do I get centered images using Sigil?

provlima · 04-29-2022, 05:27 PM

I am exporting an ODT manuscript to epub and am having a problem when viewing in page edit and the Kindle Preview Reader.
All the images are left indented. How do I correct the code to get them properly centered as they were in the original manuscript?
I have included the code as shown in the Sigil editor below
How can I edit the code to have the image properly centered
Someone suggested converting the odt file to a docx file and converting that to an epub file, but that didn't work
Thanks for your help

to release that memorandum.
<img alt="OEBPS/images/image0001.jpg" class="frame0" src="../images/image0001.jpg"/>*
*
*
*
*
*

Turtle91 · 04-29-2022, 08:13 PM

You have several threads with this same question. Please refer to the multiple answers you received in those other threads.

You can manually enter the code/css:
<div class="image"><img alt="" src="../Images/sample.jpg"/></div>

div.image {margin:2em; text-indent:0; text-align:center}
div.image img {width:80%; max-width:300px}

But you must make sure your images are actually in the ePub.

Use the Sigil function to add external files, then the Sigil function to add an image to the html doc. It will do most of the work for you.

provlima · 04-30-2022, 09:33 AM

Thanks for your reply
I should have stated that I’m a newbie to encoding and am a little confused about the encoding suggestions. Do I replace the below code with one of your suggestions to correct the left image problem or does some of the encoding at the top of the document pasted below have to be changed?


<img alt="OEBPS/images/image0001.jpg" class="frame0" src="../images/image0001.jpg"/>*
*

Top epub encoding
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
<head><link href="../styles/stylesheet.css" rel="stylesheet" type="text/css"/>
<title></title>
</head>
<body xmlns:epub="http://www.idpf.org/2007/ops" class="body0">
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * **CHAPTER VI

Turtle91 · 04-30-2022, 10:00 AM

There are several things I would do differently to that code sample...but to fix the image centering issue I would use the code I provided:

<div class="image"><img alt="" src="../images/image0001.jpg"/></div>

Then you need to use the styling information in your linked CSS sheet:

div.image {margin:2em; text-indent:0; text-align:center}
div.image img {width:80%; max-width:300px}

The blue stuff is just an example and you can change it to suit your desires.

I would highly recommend reviewing the CSS/HTML tutorials...some are provided in MR's Wiki, some in W3Schools, or you can google online.

DiapDealer · 04-30-2022, 10:13 AM

Sigil is irrelevant in this regard. You'd do it in the exact same way as you would without Sigil. This is a CSS question.

04-29-2022, 05:27 PM	#1
provlima Junior Member Posts: 8 Karma: 10 Join Date: Feb 2022 Device: kindle	How do I get centered images using Sigil? I am exporting an ODT manuscript to epub and am having a problem when viewing in page edit and the Kindle Preview Reader. All the images are left indented. How do I correct the code to get them properly centered as they were in the original manuscript? I have included the code as shown in the Sigil editor below How can I edit the code to have the image properly centered Someone suggested converting the odt file to a docx file and converting that to an epub file, but that didn't work Thanks for your help to release that memorandum.</span></p> <p class="para0"><img alt="OEBPS/images/image0001.jpg" class="frame0" src="../images/image0001.jpg"/></p> <p class="para0"></p> <p class="para0"></p> <p class="para1"></p> <p class="para0"></p> <p class="para0"></p>

04-29-2022, 08:13 PM	#2
Turtle91 A Hairy Wizard Posts: 3,351 Karma: 20171571 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire	You have several threads with this same question. Please refer to the multiple answers you received in those other threads. You can manually enter the code/css: <div class="image"><img alt="" src="../Images/sample.jpg"/></div> div.image {margin:2em; text-indent:0; text-align:center} div.image img {width:80%; max-width:300px} But you must make sure your images are actually in the ePub. Use the Sigil function to add external files, then the Sigil function to add an image to the html doc. It will do most of the work for you. Last edited by Turtle91; 04-29-2022 at 08:21 PM.

04-30-2022, 09:33 AM	#3
provlima Junior Member Posts: 8 Karma: 10 Join Date: Feb 2022 Device: kindle	Please clarify Thanks for your reply I should have stated that I’m a newbie to encoding and am a little confused about the encoding suggestions. Do I replace the below code with one of your suggestions to correct the left image problem or does some of the encoding at the top of the document pasted below have to be changed? </span></p> <p class="para0"><img alt="OEBPS/images/image0001.jpg" class="frame0" src="../images/image0001.jpg"/></p> <p class="para0"></p> Top epub encoding <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops"> <head><link href="../styles/stylesheet.css" rel="stylesheet" type="text/css"/> <title></title> </head> <body xmlns:epub="http://www.idpf.org/2007/ops" class="body0"> <p class="para0"><span class="span0">* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * **</span><span class="span1">CHAPTER VI</span></p>

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
can epub file images be centered using Sigil	provlima	Workshop	2	04-23-2022 08:34 AM
odt to epub conversion why are images not centered?	provlima	Sigil	3	04-12-2022 03:34 PM
Left alignment with centered images	shoelesshunter	Kobo Reader	0	10-18-2019 03:22 PM
Cover Images Aren't Always Being Centered	deback	Conversion	17	11-22-2017 09:21 PM
Images...etc. aren't centered on my eReader! Please Help!!!	Ephraim	Sigil	14	01-03-2011 02:54 AM

04-30-2022, 10:00 AM	#4
Turtle91 A Hairy Wizard Posts: 3,351 Karma: 20171571 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire	There are several things I would do differently to that code sample...but to fix the image centering issue I would use the code I provided: <div class="image"><img alt="" src="../images/image0001.jpg"/></div> Then you need to use the styling information in your linked CSS sheet: div.image {margin:2em; text-indent:0; text-align:center} div.image img {width:80%; max-width:300px} The blue stuff is just an example and you can change it to suit your desires. I would highly recommend reviewing the CSS/HTML tutorials...some are provided in MR's Wiki, some in W3Schools, or you can google online.

04-30-2022, 10:13 AM	#5
DiapDealer Grand Sorcerer Posts: 28,570 Karma: 204127028 Join Date: Jan 2010 Device: Nexus 7, Kindle Fire HD	Sigil is irrelevant in this regard. You'd do it in the exact same way as you would without Sigil. This is a CSS question.

Advert

Advert