06-30-2011, 10:22 PM | #1 |
Fanatic
Posts: 541
Karma: 1152752
Join Date: Aug 2010
Location: Evansville, IN, USA
Device: Samsung Galaxy Tab 4 Nook & Samsung Galaxy Tab S 10.5
|
Can you center vertically?
I know how to center text/images/etc. horizontally. Is there any way to center say a title page image vertically on the screen?
Thanks. - Byron |
07-01-2011, 12:27 AM | #2 |
Addict
Posts: 351
Karma: 70000
Join Date: Jul 2010
Location: Australia
Device: ADE, iPad
|
Make the image the size of the Screen.
e.g. iBook for iPad the images size need to be 600x860pixels. This will fill up the screen. I guess you could have something like making the image sit at a drop of 50%. p.chapterhead { margin-top: 50%; } <p class="chapterhead"><img src="images/Contents.png" alt="contents.png"/></p> |
Advert | |
|
07-01-2011, 04:11 AM | #3 | ||
frumious Bandersnatch
Posts: 7,517
Karma: 19000001
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
Quote:
Quote:
I'm afraid there is no robust, compliant way of positioning elements vertically in the screen... |
||
07-01-2011, 05:40 AM | #4 |
Fanatic
Posts: 541
Karma: 1152752
Join Date: Aug 2010
Location: Evansville, IN, USA
Device: Samsung Galaxy Tab 4 Nook & Samsung Galaxy Tab S 10.5
|
|
07-01-2011, 07:48 AM | #5 |
Addict
Posts: 351
Karma: 70000
Join Date: Jul 2010
Location: Australia
Device: ADE, iPad
|
|
Advert | |
|
07-01-2011, 01:41 PM | #6 | |
Fanatic
Posts: 541
Karma: 1152752
Join Date: Aug 2010
Location: Evansville, IN, USA
Device: Samsung Galaxy Tab 4 Nook & Samsung Galaxy Tab S 10.5
|
Quote:
Probably what I need to do is paste my image into another "template" that's the size of my screen, with the correct aspect ratio, and use my photo-editing software to center it vertically. I was just hoping there was an easy way to do that with html rather than editing the image. Thanks again for the assistance guys. - Byron |
|
07-02-2011, 04:30 AM | #7 | |
frumious Bandersnatch
Posts: 7,517
Karma: 19000001
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
Quote:
But the problem, in my experience, is that it is not clear what "height: 100%" means. We would like it to be "the whole usable screen height", but in the ePUB format (and in the way it is interpreted by the reading software) this is not the case, there is no concept of "screen", and it rather refers to the height of the containing element, which is often not defined. Say you have something like: Code:
<html> <body> <div><img src="cover.jpg" alt=""/></div> </body> </html> |
|
07-04-2011, 03:28 AM | #8 | |
Zealot
Posts: 107
Karma: 1000
Join Date: Sep 2010
Location: Melbourne, Australia
Device: iPad2, Kindle
|
Quote:
|
|
07-06-2011, 07:48 AM | #9 |
Guru
Posts: 718
Karma: 1085610
Join Date: Mar 2009
Location: Bristol, England
Device: PRS-T1, 1825PT, Galaxy Tab, One X, TF700T, Aura HD, Nexus 7
|
This question was asked some time ago and someone wrote a bit of code that sort of fixes this for text, not tried it for pictures though.
Code:
<body> <div class="wedge"></div> <div class="container"> <table> <tr> <td> <p>Bull's eye!</p> </td> </tr> </table> </div> </body> Code:
html, body {height:100%; margin:0; padding:0; font-style: italic;} .wedge {float:left; height:50%; margin-bottom:-2em;} .container {clear:both; height:4em; position:relative;} table, tr, th {height:4em;width:100%;text-align:center;} The author of the code said it's a bit rought-and-ready, but it did seem to work for me. |
07-06-2011, 09:38 AM | #10 |
frumious Bandersnatch
Posts: 7,517
Karma: 19000001
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
That's (the red parts) what I mentioned, it's not clear at all to me that it must work as intended (i.e., I don't see the spec is clear in this point). It may work in some readers/systems, though.
|
07-07-2011, 03:19 AM | #11 |
Guru
Posts: 718
Karma: 1085610
Join Date: Mar 2009
Location: Bristol, England
Device: PRS-T1, 1825PT, Galaxy Tab, One X, TF700T, Aura HD, Nexus 7
|
Hell if I know Jellby, but it works for me to centre a line or two of text slap-bang in the middle of a page both virtically and horizontally on every single reading device and software I've tried it on (except for v2 of Aldiko, Coolreader and FBReader).
As long as it works, I'm not worrying about it, just waiting until a better way comes about. |
Thread Tools | Search this Thread |
|
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 a div | marcelo2605 | ePub | 4 | 05-13-2011 07:39 AM |
image be in the center | yuxi_kelly | ePub | 2 | 03-19-2011 10:40 AM |
Images flipped vertically when converting from PDF | kataleen | Calibre | 1 | 12-16-2010 02:26 AM |
How to center 10% hr on ADE/PRS505 | Ankh | ePub | 5 | 04-16-2009 10:05 PM |