How to center an image vertically

GBAV · 03-08-2010, 10:18 PM

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.

awp · 03-09-2010, 04:00 AM

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>

omk3 · 03-09-2010, 05:19 AM

Thanks awp.
I was thinking about something similar the other day:
Is there any way to center text vertically on a page?

wallcraft · 03-09-2010, 06:26 AM

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>

charleski · 03-09-2010, 08:48 AM

Quote:

Originally Posted by omk3

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.

kovidgoyal · 03-09-2010, 10:19 AM

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>

ghostyjack · 03-09-2010, 10:38 AM

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.

kovidgoyal · 03-09-2010, 10:41 AM

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 · 03-09-2010, 10:50 AM

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

charleski · 03-09-2010, 11:36 AM

Quote:

Originally Posted by kovidgoyal

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.

omk3 · 03-09-2010, 01:13 PM

Thanks Kovid!
Certainly not an ideal solution, but much better than using a lot of <br /> tags and hoping

kovidgoyal · 03-09-2010, 02:32 PM

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.

GBAV · 03-10-2010, 02:24 PM

Can anythin be done with the page-template?

Ankh · 03-20-2010, 01:22 PM

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>

GBAV · 03-21-2010, 03:22 AM

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>

03-08-2010, 10:18 PM	#1
GBAV 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
awp 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>

03-09-2010, 05:19 AM	#3
omk3 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, 10:50 AM	#9
kovidgoyal creator of calibre Posts: 43,839 Karma: 22666666 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).

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

03-09-2010, 10:38 AM	#7
ghostyjack 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
kovidgoyal creator of calibre Posts: 43,839 Karma: 22666666 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, 01:13 PM	#11
omk3 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
kovidgoyal creator of calibre Posts: 43,839 Karma: 22666666 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
GBAV Junior Member Posts: 5 Karma: 10 Join Date: Mar 2010 Device: PRS-505, PRS-300	Can anythin be done with the page-template?

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