[DNSB]

Originally Posted by nindotza

I am creating an ebook using calibre edit book. I want to center a small image or a title on a page. I am using CSS to do so, and it looks just as I want it in the e-book edit app. However, once I migrate it to the reader those elements are not centering. What is the reliable way to set elements to center horizontally.

This is what I am doing using basic CSS

Spoiler:

<div class="outerBox">
<div class="innerBox">
  <h2>The One Kingdom</h2>
  <img src="flow_2.jpg" alt="leaflet"/>
</div>
</div>

CSS (in the stylesheet.css) is:

.outerBox{
   text-align:center;
}
.innerBox{
   display:inline-block;
}

(NOTE the CSS file is correctly specified as changes are reflected in the editor)

Which reader? Amazon, Kobo, Pocketbook, calibre's ebook viewer, ereader app on an iOS or Android device or ???

Quite a few ereader apps have to told to use the ebook's CSS and even there many lack support for quite a few CSS tags.