Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 03-08-2010, 10:18 PM   #1
GBAV
Junior Member
GBAV began at the beginning.
 
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.
GBAV is offline   Reply With Quote
Old 03-09-2010, 04:00 AM   #2
awp
Addict
awp exercises by bench pressing the entire Harry Potter series in hardcoverawp exercises by bench pressing the entire Harry Potter series in hardcoverawp exercises by bench pressing the entire Harry Potter series in hardcoverawp exercises by bench pressing the entire Harry Potter series in hardcoverawp exercises by bench pressing the entire Harry Potter series in hardcoverawp exercises by bench pressing the entire Harry Potter series in hardcoverawp exercises by bench pressing the entire Harry Potter series in hardcoverawp exercises by bench pressing the entire Harry Potter series in hardcoverawp exercises by bench pressing the entire Harry Potter series in hardcoverawp exercises by bench pressing the entire Harry Potter series in hardcoverawp exercises by bench pressing the entire Harry Potter series in hardcover
 
awp's Avatar
 
Posts: 201
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>
awp is offline   Reply With Quote
 
Enthusiast
Old 03-09-2010, 05:19 AM   #3
omk3
Wizard
omk3 can name that ebook in five wordsomk3 can name that ebook in five wordsomk3 can name that ebook in five wordsomk3 can name that ebook in five wordsomk3 can name that ebook in five wordsomk3 can name that ebook in five wordsomk3 can name that ebook in five wordsomk3 can name that ebook in five wordsomk3 can name that ebook in five wordsomk3 can name that ebook in five wordsomk3 can name that ebook in five words
 
omk3's Avatar
 
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.
omk3 is offline   Reply With Quote
Old 03-09-2010, 06:26 AM   #4
wallcraft
reader
wallcraft ought to be getting tired of karma fortunes by now.wallcraft ought to be getting tired of karma fortunes by now.wallcraft ought to be getting tired of karma fortunes by now.wallcraft ought to be getting tired of karma fortunes by now.wallcraft ought to be getting tired of karma fortunes by now.wallcraft ought to be getting tired of karma fortunes by now.wallcraft ought to be getting tired of karma fortunes by now.wallcraft ought to be getting tired of karma fortunes by now.wallcraft ought to be getting tired of karma fortunes by now.wallcraft ought to be getting tired of karma fortunes by now.wallcraft ought to be getting tired of karma fortunes by now.
 
wallcraft's Avatar
 
Posts: 6,979
Karma: 5183568
Join Date: Mar 2006
Location: Mississippi, USA
Device: Kindle 3 and Fire
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>
wallcraft is offline   Reply With Quote
Old 03-09-2010, 08:48 AM   #5
charleski
Wizard
charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.
 
Posts: 1,188
Karma: 727236
Join Date: Sep 2009
Device: PRS-505
Quote:
Originally Posted by omk3 View Post
Thanks awp.
I was thinking about something similar the other day:
Is there any way to center text vertically on a page?
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.
charleski is offline   Reply With Quote
Old 03-09-2010, 10:19 AM   #6
kovidgoyal
creator of calibre
kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.
 
kovidgoyal's Avatar
 
Posts: 25,620
Karma: 4998447
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>
kovidgoyal is offline   Reply With Quote
Old 03-09-2010, 10:38 AM   #7
ghostyjack
Guru
ghostyjack ought to be getting tired of karma fortunes by now.ghostyjack ought to be getting tired of karma fortunes by now.ghostyjack ought to be getting tired of karma fortunes by now.ghostyjack ought to be getting tired of karma fortunes by now.ghostyjack ought to be getting tired of karma fortunes by now.ghostyjack ought to be getting tired of karma fortunes by now.ghostyjack ought to be getting tired of karma fortunes by now.ghostyjack ought to be getting tired of karma fortunes by now.ghostyjack ought to be getting tired of karma fortunes by now.ghostyjack ought to be getting tired of karma fortunes by now.ghostyjack ought to be getting tired of karma fortunes by now.
 
ghostyjack's Avatar
 
Posts: 714
Karma: 1085604
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.
ghostyjack is offline   Reply With Quote
Old 03-09-2010, 10:41 AM   #8
kovidgoyal
creator of calibre
kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.
 
kovidgoyal's Avatar
 
Posts: 25,620
Karma: 4998447
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.
kovidgoyal is offline   Reply With Quote
Old 03-09-2010, 10:50 AM   #9
kovidgoyal
creator of calibre
kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.
 
kovidgoyal's Avatar
 
Posts: 25,620
Karma: 4998447
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
That will give you a single page epub (test.epub) with text that will be correctly horizontall and vertically centered in the calibre viewer (and any other SVG supporting viewer that accepts the text-anchor property).
kovidgoyal is offline   Reply With Quote
Old 03-09-2010, 11:36 AM   #10
charleski
Wizard
charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.
 
Posts: 1,188
Karma: 727236
Join Date: Sep 2009
Device: PRS-505
Quote:
Originally Posted by kovidgoyal View Post
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.
Unfortunately, it looks like it doesn't . The text is centered vertically, but not horizontally (it starts at the middle of the screen and runs off to the right). ADE doesn't seem to support textPath either.

Good idea to try SVG though - I'd never thought of that.
charleski is offline   Reply With Quote
Old 03-09-2010, 01:13 PM   #11
omk3
Wizard
omk3 can name that ebook in five wordsomk3 can name that ebook in five wordsomk3 can name that ebook in five wordsomk3 can name that ebook in five wordsomk3 can name that ebook in five wordsomk3 can name that ebook in five wordsomk3 can name that ebook in five wordsomk3 can name that ebook in five wordsomk3 can name that ebook in five wordsomk3 can name that ebook in five wordsomk3 can name that ebook in five words
 
omk3's Avatar
 
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
omk3 is offline   Reply With Quote
Old 03-09-2010, 02:32 PM   #12
kovidgoyal
creator of calibre
kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.
 
kovidgoyal's Avatar
 
Posts: 25,620
Karma: 4998447
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.
kovidgoyal is offline   Reply With Quote
Old 03-10-2010, 02:24 PM   #13
GBAV
Junior Member
GBAV began at the beginning.
 
Posts: 5
Karma: 10
Join Date: Mar 2010
Device: PRS-505, PRS-300
Can anythin be done with the page-template?
GBAV is offline   Reply With Quote
Old 03-20-2010, 01:22 PM   #14
Ankh
Guru
Ankh ought to be getting tired of karma fortunes by now.Ankh ought to be getting tired of karma fortunes by now.Ankh ought to be getting tired of karma fortunes by now.Ankh ought to be getting tired of karma fortunes by now.Ankh ought to be getting tired of karma fortunes by now.Ankh ought to be getting tired of karma fortunes by now.Ankh ought to be getting tired of karma fortunes by now.Ankh ought to be getting tired of karma fortunes by now.Ankh ought to be getting tired of karma fortunes by now.Ankh ought to be getting tired of karma fortunes by now.Ankh ought to be getting tired of karma fortunes by now.
 
Ankh's Avatar
 
Posts: 708
Karma: 2003741
Join Date: Oct 2008
Location: Ottawa, ON
Device: Kobo Touch
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.
Ankh is offline   Reply With Quote
Old 03-21-2010, 03:22 AM   #15
GBAV
Junior Member
GBAV began at the beginning.
 
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.
GBAV is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

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


All times are GMT -4. The time now is 08:27 PM.


MobileRead.com is a privately owned, operated and funded community.