Center object vertically on page

crutledge · 12-26-2012, 04:42 PM

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!

theducks · 12-26-2012, 05:15 PM

Quote:

Originally Posted by crutledge

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!

Own 'screen' or own file?
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%

HarryT · 12-27-2012, 02:04 AM

It won't work. There no way (that I know of) to vertically centre something on a page.

Jellby · 12-27-2012, 03:46 AM

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.

HarryT · 12-27-2012, 03:48 AM

Quote:

Originally Posted by Jellby

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.

It doesn't work with ADE, unfortunately, and that's what the overwhelming majority of ePub eInk devices use.

Jellby · 12-27-2012, 04:07 AM

Quote:

Originally Posted by HarryT

It doesn't work with ADE, unfortunately, and that's what the overwhelming majority of ePub eInk devices use.

Precisely with ADE it works somehow, at least it seems to work (in my Orizon) with my covers and in the ePub Reader Test, but I didn't test it thoroughly.

HarryT · 12-27-2012, 04:14 AM

Quote:

Originally Posted by Jellby

Precisely with ADE it works somehow, at least it seems to work (in my Orizon) with my covers and in the ePub Reader Test, but I didn't test it thoroughly.

It didn't work when I last tried it on my Sony PRS-350. Perhaps that's running an old version of ADE? The important point, though, is that it really can't be relied on to work.

Agama · 12-28-2012, 09:37 AM

Have you tried this?

http://www.w3.org/Style/Examples/007/center.en.html

crutledge · 12-28-2012, 12:52 PM

Quote:

Originally Posted by Agama

Have you tried this?

http://www.w3.org/Style/Examples/007/center.en.html

I'll give it a try and report back.

Jellby · 12-28-2012, 01:53 PM

It still relies on setting a height for the container: "min-height: 10em;" or whatever.

Agama · 12-28-2012, 02:16 PM

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.

Jellby · 12-28-2012, 02:28 PM

As discussed above and elsewhere, "height: 100%" is often ambiguous.

Agama · 12-28-2012, 03:00 PM

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.

HarryT · 12-28-2012, 04:06 PM

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).

crutledge · 12-28-2012, 05:03 PM

Quote:

Originally Posted by crutledge

I'll give it a try and report back.

Doesn't seem o do much for ePub.

12-26-2012, 04:42 PM	#1
crutledge eBook FANatic Posts: 11,861 Karma: 13081948 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! __________________ Charlie 'Bene legere saecla vincere'. 'To read well is to master the ages' [Prof. Issac Flagg]

12-27-2012, 02:04 AM	#3
HarryT eBook Enthusiast Posts: 54,661 Karma: 26165759 Join Date: Nov 2006 Location: UK Device: Kindle Touch, PW, Fire HD, iPad 3, iPhone 4, Samsung Tab 2 7 + More	It won't work. There no way (that I know of) to vertically centre something on a page. __________________ Harry Currently proofreading The Poison Belt, by Sir Arthur Conan Doyle.

12-28-2012, 02:16 PM	#11
Agama Fanatic Posts: 555 Karma: 422221 Join Date: Jul 2010 Location: UK Device: Sony PRS-300 & Kindle PW	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, 04:06 PM	#14
HarryT eBook Enthusiast Posts: 54,661 Karma: 26165759 Join Date: Nov 2006 Location: UK Device: Kindle Touch, PW, Fire HD, iPad 3, iPhone 4, Samsung Tab 2 7 + More	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). __________________ Harry Currently proofreading The Poison Belt, by Sir Arthur Conan Doyle.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

12-27-2012, 03:46 AM	#4
Jellby frumious Bandersnatch Posts: 5,142 Karma: 2505637 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon	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-28-2012, 09:37 AM	#8
Agama Fanatic Posts: 555 Karma: 422221 Join Date: Jul 2010 Location: UK Device: Sony PRS-300 & Kindle PW	Have you tried this? http://www.w3.org/Style/Examples/007/center.en.html

12-28-2012, 01:53 PM	#10
Jellby frumious Bandersnatch Posts: 5,142 Karma: 2505637 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon	It still relies on setting a height for the container: "min-height: 10em;" or whatever.

12-28-2012, 02:28 PM	#12
Jellby frumious Bandersnatch Posts: 5,142 Karma: 2505637 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon	As discussed above and elsewhere, "height: 100%" is often ambiguous.

12-28-2012, 03:00 PM	#13
Agama Fanatic Posts: 555 Karma: 422221 Join Date: Jul 2010 Location: UK Device: Sony PRS-300 & Kindle PW	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.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
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
How to center an image vertically	GBAV	ePub	23	06-16-2010 10:41 AM


Advertisement Enthusiast