[RbnJrg]

Originally Posted by Julius Caesar

The following code is in my CSS file

.dedicationPage {
display: block;
page-break-before: always;
margin-top: 25%;
}


.dedicationText
{
display: block;
font-size: 0.88rem;
font-style: normal;
margin-top: 0%;
text-align:center;
}


The corresponding text in the xhtml is horizontally centered. How do I make it vertically centered as well?

The following is a nice technique to center vertically in Kindle devices (the modern ones, those who support .kf8). With the code below, you not only will be able to have vertical centered text but also a header and a footer, that will remain in the same position with practically any (device) font-size (from 1 to 7 font-size) and the most important in both, portrait and landscape mode! This technique is very useful for title pages (and other stuff that I will post in a future ). Regrettably, it doesn't work in ADE (as many others things).

In the .css stylesheet, write:

html, body {
    height: 100%; /* the key, with this, we ensure a height of 100% */
    margin: 0;
}

#content {
    display: table; /* we are going to display the container as a table so we can use the vertical-align property */
    font-family: serif;
    height: 100%;
    width: 100%;
    text-indent: 0;
    text-align: center;
}

.top_row {
    display: table-row;
    height: 7%;
}

.middle_row {
    display: table-row;
    height: 86%;
}

.bottom_row {
    display: table-row;
    height: 7%;
}

.top_cell {
    display: table-cell;
    vertical-align: top;
    text-indent: 0;
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
}

.middle_cell {
    display: table-cell;
    vertical-align: middle;
    text-indent: 0;
    text-align: center;
    font-size: 2em;
    font-weight: bold;
}

.bottom_cell {
    display: table-cell;
    vertical-align: bottom;
    text-indent: 0;
    text-align: center;
    font-size: 0.7em;
    font-weight: bold;
}

.smaller {
    font-size: 0.8em;
}

.bigger {
    font-size: 1.4em;
}

And in the .html file write:

  <div id="content">
    <div class="top_row vat">
      <p class="top_cell">Header</p>
    </div>

    <div class="middle_row">
      <p class="middle_cell"><span class="smaller">Main</span><br />
      <span class="bigger">Text</span><br />
      <br />
      <span class="smaller">A ❦ Fleuron Here?</span></p>
    </div>

    <div class="bottom_row">
      <p class="bottom_cell">First Text as Footer<br />
      Another Text (if you wish)</p>
    </div>
  </div>

Below you can see screenshots of my Kindle in portrait and lanscape mode. Also I attach the respective epub. Of course, feel free of playing with the font-size (the css font-size) as you wish; also you can change the height of the top_row, middle_row and bottom_row.

Regards
Rubén