Sorry for the delay (I was very busy today
)
In your css stylesheet, write the following:
Code:
html {
height: 100%; /* very important */
margin: 0;
}
body {
height: 100%; /* very important */
margin: 0;
}
#content {
display: table;
height: 100%;
width: 100%;
text-indent: 0;
text-align: center;
}
.img_row {
display: table-row;
height: 85%;
}
.caption_row {
display: table-row;
height: 15%;
}
.img_cell {
display: table-cell;
vertical-align: middle;
background: url("../Images/Obama.jpg") no-repeat 50% 50%; /* as you can see, the image is the background of the "cell" */
background-size: contain; /* this is important */
}
.caption_cell {
display: table-cell;
vertical-align: middle;
text-indent: 0;
text-align: center;
font-size: 0.9em;
font-weight: bold;
}
p {
text-align: justify;
text-indent: 1em;
font-size: 1em;
margin-bottom: 1em;
}
And in your .html file (where is going to go the image), write:
Code:
<body>
<div id="content">
<div class="img_row">
<p class="img_cell"></p>
</div>
<div class="caption_row">
<p class="caption_cell"><big>Barak Obama</big><br />
President of the United States of America</p>
</div>
</div>
</body>
With this technique, image and caption will remain in the same page,
ALWAYS, no matter the font-size (device's font size) and the orientation of the page (the image and caption will be together in both, portrait and landscape mode). Of course, this only works for Kindle devices that supports the .kf8 format (you are ok since your device is a Kindle PW
)
Below you can see screenshots of my K4NT (in portrait and landscape mode) and the respective ePub.
Regards
Rubén