Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > Workshop

Notices

Reply
 
Thread Tools Search this Thread
Old 09-07-2013, 12:17 AM   #1
Julius Caesar
Groupie
Julius Caesar ought to be getting tired of karma fortunes by now.Julius Caesar ought to be getting tired of karma fortunes by now.Julius Caesar ought to be getting tired of karma fortunes by now.Julius Caesar ought to be getting tired of karma fortunes by now.Julius Caesar ought to be getting tired of karma fortunes by now.Julius Caesar ought to be getting tired of karma fortunes by now.Julius Caesar ought to be getting tired of karma fortunes by now.Julius Caesar ought to be getting tired of karma fortunes by now.Julius Caesar ought to be getting tired of karma fortunes by now.Julius Caesar ought to be getting tired of karma fortunes by now.Julius Caesar ought to be getting tired of karma fortunes by now.
 
Posts: 192
Karma: 567932
Join Date: Oct 2012
Device: Kindle Paperwhite
How do you vertically center a text?

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?

Last edited by Julius Caesar; 09-07-2013 at 12:51 AM.
Julius Caesar is offline   Reply With Quote
Old 09-07-2013, 01:44 AM   #2
Toxaris
Wizard
Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.
 
Toxaris's Avatar
 
Posts: 2,961
Karma: 3427611
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-300, PRS-T1
You can't. You have to play around with margins to get it sort of centered, but that will be messed up when the font size changes.
Toxaris is offline   Reply With Quote
Old 09-07-2013, 06:12 AM   #3
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 6,150
Karma: 4792399
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
As Toxaris says, there's no standard-compliant solution for that, because there's simply no way to know (or make any reference to) the screen height.

Some devices or some apps may behave in particular ways, such that some tricks might work, but they'll fail elsewhere.
Jellby is offline   Reply With Quote
Old 09-07-2013, 05:35 PM   #4
RbnJrg
Evangelist
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: 455
Karma: 318996
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:	92
Size:	7.3 KB
ID:	110551   Click image for larger version

Name:	screen_shot-9325.gif
Views:	84
Size:	7.4 KB
ID:	110552  
Attached Files
File Type: epub Vertical Align Text.epub (2.4 KB, 70 views)
RbnJrg is offline   Reply With Quote
Old 09-08-2013, 02:00 AM   #5
Julius Caesar
Groupie
Julius Caesar ought to be getting tired of karma fortunes by now.Julius Caesar ought to be getting tired of karma fortunes by now.Julius Caesar ought to be getting tired of karma fortunes by now.Julius Caesar ought to be getting tired of karma fortunes by now.Julius Caesar ought to be getting tired of karma fortunes by now.Julius Caesar ought to be getting tired of karma fortunes by now.Julius Caesar ought to be getting tired of karma fortunes by now.Julius Caesar ought to be getting tired of karma fortunes by now.Julius Caesar ought to be getting tired of karma fortunes by now.Julius Caesar ought to be getting tired of karma fortunes by now.Julius Caesar ought to be getting tired of karma fortunes by now.
 
Posts: 192
Karma: 567932
Join Date: Oct 2012
Device: Kindle Paperwhite
Thanks Rubén. It looks far more complicated than I thought. But thanks for posting. I may try it when I have more time.
Julius Caesar is offline   Reply With Quote
Old 09-08-2013, 10:19 AM   #6
RbnJrg
Evangelist
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: 455
Karma: 318996
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by Julius Caesar View Post
Thanks Rubén. It looks far more complicated than I thought...
Not at all You only have to:

1. To define a <div> to be displayed as a table (with the property display: table;). Also give it the height that you wish (i.e, height: 200px;).

2. To define inside the previous div, a another <div> or <p> to be displayed as a table-cell (with the property display: table-cell;). Also give it the property vertical-align: middle.

That's all. After that, all what you write inside the second <div> or <p> will be vertical aligned regarding the div defined in 1.

Read the following article (Method 1): Vertical Centering with CSS

Regards
Rubén
RbnJrg is offline   Reply With Quote
Old 09-08-2013, 11:31 AM   #7
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 6,150
Karma: 4792399
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
And, in order to have the text centered in the screen, you have to somehow set the height of the <div> in #1 to 100% of the available screen space (i.e., discounting margins, status bar, etc.). While "height: 100%" looks perfect for that, it's behaviour is actually undefined, or at least in practice it is. Setting the height of <html> and <body> may do the trick in some cases, but not all. This is the reason why it is not possible to do this in ePub in a portable way.
Jellby is offline   Reply With Quote
Old 09-08-2013, 12:35 PM   #8
RbnJrg
Evangelist
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: 455
Karma: 318996
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by Jellby View Post
...While "height: 100%" looks perfect for that, it's behaviour is actually undefined, or at least in practice it is. Setting the height of <html> and <body> may do the trick in some cases, but not all. This is the reason why it is not possible to do this in ePub in a portable way.
Hi Jelby;

This is not the ePub section but the Workshop section For that reason I said that works in KINDLE and not in ADE. You can set the height of the div/table as you wish and center the text (or other things) inside vertically.

In my attachment below, you can see a vertical centered text inside a block with a height of 200px (of course, you can set the height that you wish and in ems, pts, whatever). So, in KINDLE WORKS; in ADE doesn't; in others devices, I don't know

Regards
Attached Thumbnails
Click image for larger version

Name:	screen_shot-9326.gif
Views:	79
Size:	35.4 KB
ID:	110601  
Attached Files
File Type: epub Vertical Alignment.epub (2.7 KB, 41 views)

Last edited by RbnJrg; 09-08-2013 at 12:45 PM.
RbnJrg is offline   Reply With Quote
Old 09-08-2013, 01:16 PM   #9
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 6,150
Karma: 4792399
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Quote:
Originally Posted by RbnJrg View Post
This is not the ePub section but the Workshop section For that reason I said that works in KINDLE and not in ADE. You can set the height of the div/table as you wish and center the text (or other things) inside vertically.
Sure, and I appreciate your posting a solution that works at least in some cases.

My post was simply intended as a warning for others who may read this thread and think that this is a perfect solution. And as reminder that if it does not work in ADE, it is not only because ADE is buggy (which it is), but because of a shortcoming of the ePub standard.

By the way, does the CSS-table solution work in all Kindle devices and apps supporting KF8?
Jellby is offline   Reply With Quote
Old 09-08-2013, 02:58 PM   #10
RbnJrg
Evangelist
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: 455
Karma: 318996
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by Jellby View Post
Sure, and I appreciate your posting a solution that works at least in some cases.

My post was simply intended as a warning for others who may read this thread and think that this is a perfect solution. And as reminder that if it does not work in ADE, it is not only because ADE is buggy (which it is), but because of a shortcoming of the ePub standard.
Ok, that's perfectly right

Quote:
By the way, does the CSS-table solution work in all Kindle devices and apps supporting KF8?
AFAIK, yes, it's supported in all Kindles that are be able to read the .kf8 format
RbnJrg is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Center object vertically on page crutledge Sigil 14 12-28-2012 05:03 PM
[SOLVED] Aligning text inside a <p> and an image <img> vertically (iBooks) AlPe ePub 1 10-20-2012 12:00 PM
How do you center text vertically? 44reader ePub 8 08-06-2012 01:52 PM
Can you center vertically? bfollowell ePub 10 07-07-2011 03:19 AM
How to center an image vertically GBAV ePub 23 06-16-2010 10:41 AM


All times are GMT -4. The time now is 12:40 PM.


MobileRead.com is a privately owned, operated and funded community.