03-08-2010, 10:18 PM | #1 |
Junior Member
Posts: 5
Karma: 10
Join Date: Mar 2010
Device: PRS-505, PRS-300
|
How to center an image vertically
How can I center an image vertically, so it will remain centered with all screen-resolutions?
I would like to use this for the cover page, and also for children's books where I'd like a (vertically and horizontally centered) image with text below per page. |
03-09-2010, 04:00 AM | #2 |
Addict
Posts: 228
Karma: 16000
Join Date: Jun 2009
Device: Sony PRS-T1
|
Just include your image in a separate XHTML file, and use the following HTML code:
Code:
<p><img src="img1.jpg" style="height:100%;max-width:100%"/></p> |
Advert | |
|
03-09-2010, 05:19 AM | #3 |
Wizard
Posts: 1,454
Karma: 37243
Join Date: Dec 2009
Location: Europe
Device: pocketbook 360, kindle 4
|
Thanks awp.
I was thinking about something similar the other day: Is there any way to center text vertically on a page? Last edited by omk3; 03-09-2010 at 06:35 AM. |
03-09-2010, 06:26 AM | #4 |
reader
Posts: 6,975
Karma: 5183568
Join Date: Mar 2006
Location: Mississippi, USA
Device: Kindle 3, Kobo Glo HD
|
I think you need to use SVG, but I only know the simple page-filling examples such as:
Code:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 600 800" preserveAspectRatio="xMidYMid meet"> <image width="600" height="800" xlink:href="images/Cover.png" /> </svg> |
03-09-2010, 08:48 AM | #5 |
Wizard
Posts: 1,196
Karma: 1281258
Join Date: Sep 2009
Device: PRS-505
|
I've tried all sorts of tricks to do this with no luck. All the tricks and hacks that are commonly used for browsers don't work in epubs or require knowing the actual size of the page. CSS2 just doesn't seem have the tools to do vertical text centering in a general context.
|
Advert | |
|
03-09-2010, 10:19 AM | #6 |
creator of calibre
Posts: 44,342
Karma: 23661992
Join Date: Oct 2006
Location: Mumbai, India
Device: Various
|
Code:
<html xmlns="http://www.w3.org/1999/xhtml" > <body> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 600 800" preserveAspectRatio="xMidYMid meet"> <text text-anchor="middle" x="300" y="400">centered text</text> </svg> </body> </html> |
03-09-2010, 10:38 AM | #7 |
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
|
Kovidgoyal,
That code you provided, will it centre the text regardless of the actual screen resolution? It looks like you have assumed the resolution is 600x800. This is fine for the current crop of 5" and 6" readers, but this looks like it wouldn't put it in the centre on a larger screen resolution. Please correct me if I'm wrong as svg code is still new to me. |
03-09-2010, 10:41 AM | #8 |
creator of calibre
Posts: 44,342
Karma: 23661992
Join Date: Oct 2006
Location: Mumbai, India
Device: Various
|
It will work at any screen size. What happens at different screen sizes is that the text is scaled. However, I'm not sure if Adobe Digital Edition supports the crucial
text-anchor="middle" property you'll have to test it and see. Also text in SVG does not support multiple lines, so you have to have a separate text element for each line you want centered. |
03-09-2010, 10:50 AM | #9 |
creator of calibre
Posts: 44,342
Karma: 23661992
Join Date: Oct 2006
Location: Mumbai, India
Device: Various
|
You can test it by saving the above code into a file calles test.xhtml and then running
Code:
ebook-convert test.xhtml .epub --no-default-epub-cover |
03-09-2010, 11:36 AM | #10 | |
Wizard
Posts: 1,196
Karma: 1281258
Join Date: Sep 2009
Device: PRS-505
|
Quote:
Good idea to try SVG though - I'd never thought of that. |
|
03-09-2010, 01:13 PM | #11 |
Wizard
Posts: 1,454
Karma: 37243
Join Date: Dec 2009
Location: Europe
Device: pocketbook 360, kindle 4
|
Thanks Kovid!
Certainly not an ideal solution, but much better than using a lot of <br /> tags and hoping |
03-09-2010, 02:32 PM | #12 |
creator of calibre
Posts: 44,342
Karma: 23661992
Join Date: Oct 2006
Location: Mumbai, India
Device: Various
|
Pity about Digital Editions, but I had a nasty feeling. Hopefully someone from Adobe is reading this thread and support for text-anchor can be added in the future.
|
03-10-2010, 02:24 PM | #13 |
Junior Member
Posts: 5
Karma: 10
Join Date: Mar 2010
Device: PRS-505, PRS-300
|
Can anythin be done with the page-template?
|
03-20-2010, 01:22 PM | #14 |
Guru
Posts: 714
Karma: 2003751
Join Date: Oct 2008
Location: Ottawa, ON
Device: Kobo Glo HD
|
This is ugly as hell, but works on Sony 505 and ADE/Windows 1.7.2. No SVG, so it should (does it?) work on every ePub reader.
Code:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>ePub Vertical Centering - Test Page</title> <style type="text/css"> html, body {height:100%; margin:0; padding:0;} .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;} </style> </head> <body> <div class="wedge" /> <div class="container"> <table><tr><td> <p>Bull's eye!</p> </td></tr></table> </div> </body> </html> Last edited by Ankh; 03-20-2010 at 01:32 PM. |
03-21-2010, 03:22 AM | #15 |
Junior Member
Posts: 5
Karma: 10
Join Date: Mar 2010
Device: PRS-505, PRS-300
|
Brilliant, thanks!
With some slight modifications it not only works for text but also for images! Code:
<html> <head> <style type="text/css"> html, body {height:100%; margin:0; padding:0;} .wedge {float:left; height:50%; margin-bottom: %image-height/2%;} .container {clear:both; height:0em; position: relative;} table, tr, th {height: %image-height%; width:100%; text-align:center;} </style> </head> <body> <div class="wedge" /> <div class="container"> <table><tr><td> <img src="%image%" /> </td></tr></table> </div> </body> </html> Last edited by GBAV; 03-21-2010 at 04:04 AM. |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Center a cover image | Crusader | Sigil | 2 | 10-18-2009 08:51 AM |
Using Bookdesigner...Center title up and down | davers | LRF | 5 | 04-24-2009 09:53 AM |
How to center 10% hr on ADE/PRS505 | Ankh | ePub | 5 | 04-16-2009 10:05 PM |
Support center iRex | ce3po | iRex | 3 | 12-21-2007 07:52 AM |
Mobipockets v6.1 is up in the beta center | penty | Bookeen | 4 | 11-06-2007 06:31 PM |