Image does not appear centered in KOReader but appears centered in Calibre renderer

ilikelilies · 01-09-2026, 12:54 PM

Good Afternoon,

I would like help formating an epub. I am not new to KOReader, but I _am_ new to manually formatting epubs with Calibre. Before I used to just use all epubs regardless of whether they were appropriately formatted, but lately I wanted to try getting some experience formatting them for them to look better.

The main issue I have encountered for now is with a certain epub where an image appears centered in the Calibre renderer but not in KOReader. KOReader, if I remember correctly, uses crengine, and I assume the Calibre renderer must use something based on WebKit or something similar, so that explains the difference. However, I have yet to find a solution.

The HTML body of the page concerned is below:

Code:

<body class="calibre1">
<h2 class="part-number"><em>Zero</em></h2>
<p class="centered-image-1"><img alt="Separator Image Missing" height="1" src="../images/line.jpg" width="84"/></p>
<h2 class="part-title">7 August 1944</h2>
</body></html>

The `centered-image-1` class is as follows:

Code:

p.centered-image-1 {
  text-align: center !important;
  text-indent: 0;
  margin-top: 0;
  margin-bottom: 1em;
}

`img1.png` is a screenshot of the Calibre renderer's output.

`img2.png` is a screenshot of KOReader's rendering.

The image is the line after the header "Zero".

I have yet to find a way to make the image properly center in KOReader.

<br>
<br>
<br>

Bonus question 1: Why do the same images, in different epub files but inserted with the same class, scale differently? In one epub, a width of `256` was sufficient, whereas with the other I had to change that to `512`. This difference is only present in KOReader, Calibre shows them at equal sizes when both are set to `256`.

Bonus question 2: I have a publisher information page that gets rendered properly (with text centering) with Calibre but not with KOReader. `img3.png` is how it looks rendered by Calibre, `img4.png` is how it looks in KOReader. How can I make it look like on Calibre in KOReader?

I know this is a lot so thank you very much for your time :)

Frenzie · Yesterday, 03:27 PM

The test case as given doesn't render as in the screenshot. There's either another style in the book or a style tweak like left align most text is active (or perhaps embedded styles are disabled). Please provide a complete minimal testcase if it's not one of the latter two.

nqk · Today, 04:11 AM

Try this

Code:

.centered-image-1 img {
 display: block;
 margin: 0.5rem auto;
 width: 84px;
}

the "auto" in margin will push the img to center.

ilikelilies · Today, 08:16 AM

Quote:

Originally Posted by Frenzie

a style tweak like left align most text is active (or perhaps embedded styles are disabled)

`Left align most text` in KOReader `Style tweaks -> Text -> Text alignment` is unchecked, if that's what you mean. I do have `Justify most text` enabled, in case that matters. `Embedded Style` is enabled, I never disable it.

As for the styles, here's the complete HTML of the page:

Code:

<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xml:lang="en">
  <head>
    <title>All the Light We Cannot See</title>
    <link href="../stylesheet.css" rel="stylesheet" type="text/css"/>
    <link href="../page_styles.css" rel="stylesheet" type="text/css"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  </head>
  <body class="calibre1">
<h2 class="part-number"><em>Zero</em></h2>
<p class="centered-image-1"><img alt="Separator Image Missing" height="1" src="../images/line.jpg" width="56"/></p>
<h2 class="part-title">7 August 1944</h2>
</body></html>

I've also attached the two css files to this reply if that helps. They're in the attached file `css.zip`

I don't know what a "complete minimal testcase" is, but I'd be happy to provide it if you explain what it is :)

ilikelilies · Today, 08:20 AM

Quote:

Originally Posted by nqk

Try this

Code:

.centered-image-1 img {
 display: block;
 margin: 0.5rem auto;
 width: 84px;
}

the "auto" in margin will push the img to center.

Thank you, just tried this, but it sadly doesn't work. Neither does this one work with the Calibre renderer.

Frenzie · Today, 08:58 AM

Quote:

I do have `Justify most text` enabled, in case that matters.

Well, there you go then.

Quote:

I don't know what a "complete minimal testcase" is, but I'd be happy to provide it if you explain what it is

It means the problem reduced to the minimum code necessary to show it off. Basically like your OP (though it'd be simpler if it were just a single HTML file).

Jellby · Today, 09:07 AM

Quote:

Originally Posted by ilikelilies

I do have `Justify most text` enabled, in case that matters.

Have you tried disabling it? That adds something like:

Code:

p { text-align: justify !important }

which conflicts with your "center !important". (I'm not sure what the spec says in this case, but it could be that KOReader is not handling it properly.)

For what it's worth, that kind of code usually works fine for me. I have all style tweaks disabled (except footnotes, and a custom one for smallcaps), and the "traditional book look" enabled.

Frenzie · Today, 10:15 AM

Quote:

Originally Posted by Jellby

which conflicts with your "center !important". (I'm not sure what the spec says in this case, but it could be that KOReader is not handling it properly.)

The behavior may or may not be per-spec depending on how you define "user-agent" and "user," but that distinction is irrelevant unless the user agent wishes to take power away from the user. They all take precedence over author styles regardless.

See https://drafts.csswg.org/css-cascade/#cascade-origin

ilikelilies · Today, 12:35 PM

Quote:

Originally Posted by Frenzie

Well, there you go then.

Thank you, this actually worked!

Just one minor issue, is there a way to keep the text justified without it messing with the image centering? Is it what the other user was talking about regarding `p { text-align: left !important; }` ? Do I just make that a styletweak (put it in my `$KOREADER/styletweaks` as a css file) and enable it globally?

Quote:

Originally Posted by Frenzie

It means the problem reduced to the minimum code necessary to show it off. Basically like your OP (though it'd be simpler if it were just a single HTML file).

Ohh, thanks.

And thank you again for your help :)

ilikelilies · Today, 12:57 PM

Quote:

Originally Posted by Jellby

Have you tried disabling it? That adds something like:

Code:

p { text-align: justify !important }

which conflicts with your "center !important". (I'm not sure what the spec says in this case, but it could be that KOReader is not handling it properly.)

For what it's worth, that kind of code usually works fine for me.

Thank you, disabling it ended up solving it. But – and sorry if I'm being a bit thick here – do you mean that enabling it adds `p { text-align: justify !important }`, or that I should add `p { text-align: justify !important }` as a custom tweak instead of enabling it in order for text to be justified but images to be centered properly?

Quote:

Originally Posted by Jellby

I have all style tweaks disabled (except footnotes, and a custom one for smallcaps), and the "traditional book look" enabled.

That's funny, I think we're opposites. Well, maybe that's a bit exaggerated, but I like to enable (besides 4 footnote tweaks), the tweaks for ignoring publisher page margins and widow and orphan rules, the one for ignoring publisher line heights, and a custom one for oldstyle numerals. Sometimes I also enable a custom one for discretionary ligatures (I love pretty text), and if I'm feeling really up to it a custom one for historical forms (although that can look weird) :p

Thank you again for your help :)

Jellby · Today, 03:20 PM

Quote:

Originally Posted by ilikelilies

do you mean that enabling it adds `p { text-align: justify !important }`

Yes. Long-press the menu and you will see thee CSS behind it.

Quote:

the tweaks for ignoring publisher page margins and widow and orphan rules, the one for ignoring publisher line heights

Those I delete directly from the epub, so I don't need to ignore them

Quote:

and a custom one for oldstyle numerals. Sometimes I also enable a custom one for discretionary ligatures (I love pretty text), and if I'm feeling really up to it a custom one for historical forms (although that can look weird)

I could see myself trying some of those occasionally... if I use a font that has them.

01-09-2026, 12:54 PM	#1
ilikelilies linux user Posts: 6 Karma: 10 Join Date: Jan 2026 Device: Kobo Libra 2	Image does not appear centered in KOReader but appears centered in Calibre renderer Good Afternoon, I would like help formating an epub. I am not new to KOReader, but I _am_ new to manually formatting epubs with Calibre. Before I used to just use all epubs regardless of whether they were appropriately formatted, but lately I wanted to try getting some experience formatting them for them to look better. The main issue I have encountered for now is with a certain epub where an image appears centered in the Calibre renderer but not in KOReader. KOReader, if I remember correctly, uses crengine, and I assume the Calibre renderer must use something based on WebKit or something similar, so that explains the difference. However, I have yet to find a solution. The HTML body of the page concerned is below: Code: <body class="calibre1"> <h2 class="part-number"><em>Zero</em></h2> <p class="centered-image-1"><img alt="Separator Image Missing" height="1" src="../images/line.jpg" width="84"/></p> <h2 class="part-title">7 August 1944</h2> </body></html> The `centered-image-1` class is as follows: Code: p.centered-image-1 { text-align: center !important; text-indent: 0; margin-top: 0; margin-bottom: 1em; } `img1.png` is a screenshot of the Calibre renderer's output. `img2.png` is a screenshot of KOReader's rendering. The image is the line after the header "Zero". I have yet to find a way to make the image properly center in KOReader. <br> <br> <br> Bonus question 1: Why do the same images, in different epub files but inserted with the same class, scale differently? In one epub, a width of `256` was sufficient, whereas with the other I had to change that to `512`. This difference is only present in KOReader, Calibre shows them at equal sizes when both are set to `256`. Bonus question 2: I have a publisher information page that gets rendered properly (with text centering) with Calibre but not with KOReader. `img3.png` is how it looks rendered by Calibre, `img4.png` is how it looks in KOReader. How can I make it look like on Calibre in KOReader? I know this is a lot so thank you very much for your time :) Attached Thumbnails Last edited by ilikelilies; 01-09-2026 at 12:56 PM.

Yesterday, 03:27 PM	#2
Frenzie Wizard Posts: 1,797 Karma: 731691 Join Date: Oct 2014 Location: Antwerp Device: Kobo Aura H2O	The test case as given doesn't render as in the screenshot. There's either another style in the book or a style tweak like left align most text is active (or perhaps embedded styles are disabled). Please provide a complete minimal testcase if it's not one of the latter two. Attached Thumbnails

Today, 04:11 AM	#3
nqk Fanatic Posts: 591 Karma: 32228 Join Date: Feb 2012 Device: Onyx Boox Leaf	Try this Code: .centered-image-1 img { display: block; margin: 0.5rem auto; width: 84px; } the "auto" in margin will push the img to center.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
How do I get centered images using Sigil?	provlima	Sigil	4	04-30-2022 11:13 AM
Centered initial caps?	nabsltd	ePub	60	08-26-2017 09:06 AM
Centered but left align?	mtrahan	ePub	15	04-01-2012 04:56 PM
would like toc to be centered	alansplace	Kindle Formats	9	11-20-2011 12:47 PM
Calibre screwing up centered-text b/c of forced tabs	lurker316	Calibre	0	12-21-2010 10:36 PM

Advert

Advert