View Single Post
Old 04-09-2015, 01:51 PM   #7
RbnJrg
Wizard
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: 1,641
Karma: 8566337
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by oiver55 View Post
Thanks I added the code in but I find that whenever I leave the header or the footer blank the middle row doesn't stay in the middle but goes up to the top.
No, no You don't have to have three "rows" for what you want, you need to have one row. Do the following:

In the .css stylesheet, write:

Code:
html, body {
    height: 100%;
}

#content {
    display: table;
    font-family: serif; /* Or the font-family you want */
    height: 100%;
    width: 100%;
    text-indent: 0;
    text-align: center;
}

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

.middle_cell {
    display: table-cell;
    vertical-align: middle;
    text-indent: 0;
    text-align: center;
    font-size: 2em; /* Or the font-size you want */
    font-weight: bold; /* If you wish */
}
And in the .html file write:

Code:
  <div id="content">
    <div class="middle_row">
      <p class="middle_cell">Your Text<br />Centered Here</p>
    </div>
  </div>
Below you can see the respective .epub
Regards
Attached Files
File Type: epub Vertical Align Text II.epub (2.2 KB, 307 views)
RbnJrg is offline   Reply With Quote