12-26-2012, 04:42 PM | #1 |
eBook FANatic
Posts: 18,301
Karma: 16071131
Join Date: Apr 2008
Location: Alabama, USA
Device: HP ipac RX5915 Wife's Kindle
|
Center object vertically on page
I may be making something more difficult than it should be.
I wish to center an object vertically on it's own page. Is there a simple way of doing this? Perhaps someone could point me to a css statement! |
12-26-2012, 05:15 PM | #2 | |
Well trained by Cats
Posts: 29,689
Karma: 54369090
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
|
Quote:
When it comes to Images, the problem is screens come in 3 sizes: to short, too long, just right . If you have a 800x600 screen and a 800x600 image (which is slight too big), then you try and display on a smaller screen? Have not tried: set the (Image) height: 80%; margin-top: 5%; margin-bottom: 5% |
|
12-27-2012, 02:04 AM | #3 |
eBook Enthusiast
Posts: 85,544
Karma: 93383043
Join Date: Nov 2006
Location: UK
Device: Kindle Oasis 2, iPad Pro 10.5", iPhone 6
|
It won't work. There no way (that I know of) to vertically centre something on a page.
|
12-27-2012, 03:46 AM | #4 |
frumious Bandersnatch
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
Only if you get "height: 100%" to be interpreted as the full screen height (minus margins). This is not clearly possible according to the spec (it's ambiguous at least), but some implementations might do that in some cases. Then, you can have a container with "height: 100%" (<body>, <div> or <svg>) and the image centered there, but it won't work everywhere.
|
12-27-2012, 03:48 AM | #5 | |
eBook Enthusiast
Posts: 85,544
Karma: 93383043
Join Date: Nov 2006
Location: UK
Device: Kindle Oasis 2, iPad Pro 10.5", iPhone 6
|
Quote:
|
|
12-27-2012, 04:07 AM | #6 | |
frumious Bandersnatch
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
Quote:
|
|
12-27-2012, 04:14 AM | #7 | |
eBook Enthusiast
Posts: 85,544
Karma: 93383043
Join Date: Nov 2006
Location: UK
Device: Kindle Oasis 2, iPad Pro 10.5", iPhone 6
|
Quote:
|
|
12-28-2012, 09:37 AM | #8 |
Guru
Posts: 776
Karma: 2751519
Join Date: Jul 2010
Location: UK
Device: PW2, Nexus7
|
|
12-28-2012, 12:52 PM | #9 | |
eBook FANatic
Posts: 18,301
Karma: 16071131
Join Date: Apr 2008
Location: Alabama, USA
Device: HP ipac RX5915 Wife's Kindle
|
Quote:
|
|
12-28-2012, 01:53 PM | #10 |
frumious Bandersnatch
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
It still relies on setting a height for the container: "min-height: 10em;" or whatever.
|
12-28-2012, 02:16 PM | #11 |
Guru
Posts: 776
Karma: 2751519
Join Date: Jul 2010
Location: UK
Device: PW2, Nexus7
|
I wonder what it would do with min-height:100% or to a value greater than the physical reader page?
The "separate example" linked to from the page has code of: div.container {top: 0; left: 0; width: 100%; height: 100%; position: absolute; display: table} p {display: table-cell; vertical-align: middle} but I don't if all this is supported by eReaders. Last edited by Agama; 12-28-2012 at 02:22 PM. |
12-28-2012, 02:28 PM | #12 |
frumious Bandersnatch
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
As discussed above and elsewhere, "height: 100%" is often ambiguous.
|
12-28-2012, 03:00 PM | #13 |
Guru
Posts: 776
Karma: 2751519
Join Date: Jul 2010
Location: UK
Device: PW2, Nexus7
|
Yep! You're right. I've tried many combinations and tested with ADE, calibre reader and Firefox and the results are inconsistent. This deceptively simple requirement appears to be quite intractable. Perhaps a future CSS standard will implement it.
|
12-28-2012, 04:06 PM | #14 |
eBook Enthusiast
Posts: 85,544
Karma: 93383043
Join Date: Nov 2006
Location: UK
Device: Kindle Oasis 2, iPad Pro 10.5", iPhone 6
|
Exactly. It's a simple requirement, but there's no easy solution. Best thing to do at the moment is to simply leave a reasonable top margin, then insert whatever it is you want on the page (it's generally some sort of title page that you want this for).
|
12-28-2012, 05:03 PM | #15 |
eBook FANatic
Posts: 18,301
Karma: 16071131
Join Date: Apr 2008
Location: Alabama, USA
Device: HP ipac RX5915 Wife's Kindle
|
|
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 |
How do you center text vertically? | 44reader | ePub | 8 | 08-06-2012 01:52 PM |
Authors vertically | jfbok | Library Management | 4 | 05-30-2012 12:31 PM |
Can you center vertically? | bfollowell | ePub | 10 | 07-07-2011 03:19 AM |
How to center/fit page width SVG images with <OBJECT> | amoroso | ePub | 0 | 07-31-2010 11:48 AM |