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
<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)