View Single Post
Old 09-14-2024, 10:16 PM   #4
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,355
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
So, I've given a few examples on how to vertically center the text on the page (search the MR threads for a more in-depth discussion). Such techniques work fine and follow the ePub2 rules, but you may have issues with a particular brand of device (ePub on Kobo rings a bell). You can easily modify that technique to put it at the bottom using vertical-align:bottom.

If you are working on an ePub3 book, then it may be a little more elegant to use display:flex rather than the display:table technique.

Code:
CSS:
  div.v-btm     {height:100vh; width:100vw; display:table; position:fixed;
                 padding:0; margin:0; text-indent:0}
  div.v-btm div {display:table-cell; vertical-align:bottom}
  div.v-btm .ctr{text-align:center}

HTML:
<body>
<div class="v-btm">
  <div>
    <p>Text at the bottom of the page.</p>
    <p class="ctr">Text at the bottom of the page and centered.</p>
  </div>
</div>
</body>
Click image for larger version

Name:	Screenshot 2024-09-14 221042.png
Views:	227
Size:	255.0 KB
ID:	210817
Turtle91 is offline   Reply With Quote