I'm working on an epub eBook in calibre. It is intended to be responsive. I can make full use of CSS 3.
In one part of the book I'd like to put text on top of an image.
The image must be horizontally centered on the page.
The text must be horizontally centered on top of the image, 15% down from the top.
The image has a blank section 15% from the where the text is to go. In a responsive environment, as the size of the viewport changes, the image and consequently the blank section will also change in size. I want the text to be positioned in that blank section.
I'm having trouble getting the image horizontally centered and in getting the text to both center and be the right proportional distance down.
Here's what I have so far. There's a corresponding JSFiddle at I created a JSFiddle for what I have now: http://jsfiddle.net/blearyeye/d888kv7w/
font-family: "Filosofia", sans-serif;
<img src="TheImage.png" style="position:absolute;"/>
<p class="block_17" id="calibre_pb_20" style="inline;top:70;width:100%;position:absolute;">The Desired Text</p>
There are a number of problems I'm having. The image isn't being centered in the viewport. The text isn't being centered at all. The text isn't being moved down at all, even with an absolute top attribute.