View Single Post
Old 09-07-2013, 05:35 PM   #4
RbnJrg
Addict
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 376
Karma: 255494
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by Julius Caesar View Post
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:

Code:
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:

Code:
  <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
Attached Thumbnails
Click image for larger version

Name:	screen_shot-9324.gif
Views:	58
Size:	7.3 KB
ID:	110551   Click image for larger version

Name:	screen_shot-9325.gif
Views:	54
Size:	7.4 KB
ID:	110552  
Attached Files
File Type: epub Vertical Align Text.epub (2.4 KB, 38 views)
RbnJrg is offline   Reply With Quote