View Single Post
Old 07-27-2018, 04:22 PM   #26
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,363
Karma: 20212733
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
This has worked for me for several years. I wish I could remember who I got it from on the internetz...

I think it was Hitch that mentioned Kindle/Amazon doesn't like Tables, but I'm not sure if "doesn't like" equates to "doesn't work". I don't use Kindle - except to immediately convert it to ePub.

edit: The technique doesn't actually use "tables" it simply uses the properties of tables in the CSS for "display:table-cell".
You can have any number of items within the inner div and it'll vertically center on the page. Works great for title pages, dedications, Book/Part headings, etc.

Cheers,

Code:
<head>
  <title>Vertical Center</title>
  <style>
/* 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}
</style>
</head>

<body>
  <div class="v-ctr">
    <div>
      <p>Centered</p>
    </div>
  </div>
</body>
</html>

Last edited by Turtle91; 07-27-2018 at 04:28 PM.
Turtle91 is offline   Reply With Quote