View Single Post
Old 05-09-2024, 08:56 AM   #2
Turtle91
A Hairy Wizard
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
Posts: 3,359
Karma: 20171571
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
Hi Lucie - welcome to MR!

The easiest way to make sure it is on it's own page is to put it in its own html file. Each chapter should be in a separate file and you can just place the quote file before the chapter file.

Are you using ePub2 or ePub3?? There are different techniques for the different versions.

For ePub2, I borrow some <table> properties without having to use a table. It works great on my devices but I can't guarantee all devices support <table>s, although, it would be a pretty poor device/app that didn't... What device/app are you targeting for your book?

In my case (ePub2) I surround whatever I want to be vertically centered with a double <div>. You can style the interior paragraphs however you like... ie. horizontally centered. You can see a better explanation on W3Schools website. They are a pretty decent resource for coding specifics.

Code:
CSS:
/* Vertically centered on page */
div.v-ctr      {height:100%; width:100%; display:table; position:fixed; 
                padding:0; margin:0; text-indent:0}

div.v-ctr div {display:table-cell; vertical-align:middle; 
                padding:0; margin:0}


HTML:
<body>
  <div class="v-ctr">
    <div>
      <p>yadda yadda yadda</p>
    </div>
  </div>
</body>
You can actually use the same technique for ePub3, but there are some more elegant solutions using display:flex... be aware that many, especially older, devices won't support ePub3 coding.

Cheers!
Attached Thumbnails
Click image for larger version

Name:	Screenshot 2024-05-09 083935.png
Views:	388
Size:	87.4 KB
ID:	208159  

Last edited by Turtle91; 05-09-2024 at 09:12 AM.
Turtle91 is offline   Reply With Quote