![]() |
#1 |
Connoisseur
![]() Posts: 91
Karma: 10
Join Date: Feb 2014
Location: Long Island, NY
Device: Aura, N514KUBKKEP, 4.7.10.413
|
possible to have text arranged like this?
This can be described as both text items as approaching the center....
Last edited by u238110; 02-23-2015 at 10:32 AM. |
![]() |
![]() |
![]() |
#2 |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
|
Real vertical alignment that works on all devices is not really possible, only approximations. In some devices it can be achieved in some way.
|
![]() |
![]() |
![]() |
#3 |
Connoisseur
![]() Posts: 91
Karma: 10
Join Date: Feb 2014
Location: Long Island, NY
Device: Aura, N514KUBKKEP, 4.7.10.413
|
I'm not concerned about device compatibility. I'm just concerned about good code. I'm a purist. If there's a problem and it's the device's fault, well hopefully one day devices will be more sophisticated.
I have this "dead center" code which is close.. I'm basically looking for the split up version of this "dead center" code. It's almost as if I want an invisible entity in the dead center and the two text items are gravitating towards it. Code:
<p style="float:none;margin:50vh auto 0;text-align:center;-webkit-transform: translateY(-50%);transform: translateY(-50%)">test</p> Last edited by u238110; 02-23-2015 at 02:06 PM. |
![]() |
![]() |
![]() |
#4 |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 1,774
Karma: 8700631
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
In that case is perfectly possible. Use the following code:
1. In your .css stylesheet write: Code:
html, body { height: 100%; } #container { display: table; height: 100%; width: 100%; border: 5px solid; } .row { display: table-row; height: 33%; } .cell { display: table-cell; height: 33%%; vertical-align: bottom; text-align: center; } Code:
<body> <div id="container"> <div class="row"> <p class="cell">text</p> </div> <div class="row"> <p class="cell">text</p> </div> <div class="row"> <p class="cell"> </p> </div> </div> </body> As you can see, I use a model of three rows and a "vertical-align: bottom". You can bring the text to the center of the screen all you want by changing the height of the rows (for example with the first and third rows with a height of 40% and the middle row with a height of 20% the text will be nearer the center). Of course, take in count that in order to use this code on ADE, you must convert the .epub I attach as epub3 and to use ADE 4 (or higher). Regards Rubén |
![]() |
![]() |
![]() |
#5 |
Connoisseur
![]() Posts: 91
Karma: 10
Join Date: Feb 2014
Location: Long Island, NY
Device: Aura, N514KUBKKEP, 4.7.10.413
|
Thanks a lot for your help, however it doesn't seem to work. The raw code appears in the preview window. I even found an option called Link Stylesheets... and that didn't fix it...
|
![]() |
![]() |
![]() |
#6 |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
|
|
![]() |
![]() |
![]() |
#7 | |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 1,774
Karma: 8700631
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
![]() |
|
![]() |
![]() |
![]() |
|
![]() |
||||
Thread | Thread Starter | Forum | Replies | Last Post |
How to Copy & Paste text from Chinese text PDF? | E-Books | 4 | 08-09-2014 09:22 AM | |
Text formatting issues when creating IDs/hyperlinking text | rnuss | Sigil | 2 | 09-28-2013 06:49 AM |
Need help w/very simple task: page of Word text > Kindle text I can share w/friends | kearnine | Conversion | 1 | 10-17-2012 08:25 PM |
How to make Amazon Kindle Text to Speech skip over some text | xsaero00 | Kindle Developer's Corner | 3 | 06-18-2011 07:09 PM |
Spiritual Various: KJV Psalms and Proverbs arranged for daily reading. | Rootman | ePub Books | 2 | 02-05-2010 08:50 PM |