View Single Post
Old 06-18-2023, 11:37 PM   #17
DNSB
Bibliophagist
DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.
 
DNSB's Avatar
 
Posts: 46,671
Karma: 169712392
Join Date: Jul 2010
Location: Vancouver
Device: Kobo Sage, Libra Colour, Lenovo M8 FHD, Paperwhite 4, Tolino epos
Not sure if this is exactly what was wanted but it seems to work for me. Not quite sure from my notes but think I lifted this from a post on MobileRead a few years back (2010???).

Code:
  <div class="vcenter1"></div>
  <div class="vcenter2">
    <table>
      <tbody>
        <tr>
          <td>
            <p>Happy birthday to you,</p>

            <p>Peace and happiness to you,</p>

            <p>May your life be filled with gladness,</p>

            <p>Happy birthday to you!</p>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
Code:
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.vcenter1 {
  float: left;
  height: 45%;
  margin-bottom: -2em;
}

.vcenter2 {
  clear: both;
  height: 0em;
  position: relative;
}

table,tr,th {
  height: 100%;
  width: 100%;
  text-align: center;
}
You need both the body and html settings. The vertical centering depends on having the right starting point so I tweak the height in vcenter1 to keep the text close to vertically centered. (the 4 lines used 45%, the 8 lines used 40% in vcenter1).
Attached Thumbnails
Click image for larger version

Name:	vcenter.png
Views:	101
Size:	17.9 KB
ID:	202120   Click image for larger version

Name:	vcenter2.png
Views:	100
Size:	24.6 KB
ID:	202121  
Attached Files
File Type: epub vcenter.epub (2.6 KB, 92 views)
DNSB is online now   Reply With Quote