09-07-2013, 12:17 AM | #1 |
Addict
Posts: 341
Karma: 1244808
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. |
09-07-2013, 01:44 AM | #2 |
Wizard
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
|
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.
|
09-07-2013, 06:12 AM | #3 |
frumious Bandersnatch
Posts: 7,533
Karma: 19000001
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. |
09-07-2013, 05:35 PM | #4 | |
Wizard
Posts: 1,586
Karma: 7836413
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
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;
}
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> Regards Rubén |
|
09-08-2013, 02:00 AM | #5 |
Addict
Posts: 341
Karma: 1244808
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.
|
09-08-2013, 10:19 AM | #6 | |
Wizard
Posts: 1,586
Karma: 7836413
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
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 |
|
09-08-2013, 11:31 AM | #7 |
frumious Bandersnatch
Posts: 7,533
Karma: 19000001
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.
|
09-08-2013, 12:35 PM | #8 | |
Wizard
Posts: 1,586
Karma: 7836413
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
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 Last edited by RbnJrg; 09-08-2013 at 12:45 PM. |
|
09-08-2013, 01:16 PM | #9 | |
frumious Bandersnatch
Posts: 7,533
Karma: 19000001
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
Quote:
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? |
|
09-08-2013, 02:58 PM | #10 | ||
Wizard
Posts: 1,586
Karma: 7836413
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
Quote:
|
||
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
How to center an image vertically | GBAV | ePub | 31 | 08-01-2018 01:57 PM |
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 |