View Full Version : 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:

<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: <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
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
<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


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

<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!

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

gardefjord
05-28-2010, 03:33 AM
These are pretty sweet solutions, I'm trying to make so that a bunch of text, say 10 rows, would be centered in the middle both horizontal and vertical. Now only the top of the piece of text gets centered.

http://farm5.static.flickr.com/4017/4646476959_abfc5fc12e.jpg

Jellby
05-28-2010, 04:33 AM
There is no reliable way to do it.

Ankh
05-28-2010, 08:00 AM
There is no reliable way to do it.

I don't see why "my" wedge technique (set the height of the content to, say, 15em) would not work. Both "table" and the text within the table cell are centered vertically.

Jellby
05-28-2010, 01:07 PM
I don't see why "my" wedge technique (set the height of the content to, say, 15em) would not work. Both "table" and the text within the table cell are centered vertically.

In my experience, because the screen height is not always accessible. You set the "wedge" height to 50%, expecting it to be 50% of the screen height (because you set the body's height to 100%, expecting it to be 100% of the screen/page height). From what I understand of the CSS specs and my (not exhaustive) tests, this is not guaranteed to work, and indeed it often does not, different renderers make different assumptions about what this "100%" refers to: some interpret is as "100% of the width", some simply ignore it, and so the "50%" also has different results.

Ankh
05-28-2010, 02:59 PM
You set the "wedge" height to 50%, expecting it to be 50% of the screen height (because you set the body's height to 100%, expecting it to be 100% of the screen/page height). From what I understand of the CSS specs and my (not exhaustive) tests, this is not guaranteed to work, and indeed it often does not, different renderers make different assumptions about what this "100%" refers to: some interpret is as "100% of the width", some simply ignore it, and so the "50%" also has different results.

Well... I don't know of renderer that fails the example code, but from what I read in 10.1 Definition of "containing block" (http://www.w3.org/TR/CSS21/visudet.html#containing-block-details) from the CSS spec, the containing block of the root element seems to be precisely defined. For continuous media such as screen, the containing block is defined by viewport dimensions. The initial containing block is defined for box generated by "html" element, the "body" is contained within the box generated by "html" box.

Sounds well defined, and looks like non-standard behaviour, for renderers where initial screen height is unknown/undefined.

I would be grateful if you can name those renderers where a xhtml code segment would fail to produce the desired effect.

Jellby
05-29-2010, 04:36 AM
I confess I have not tried your exact piece of code, but some time ago I tested similar codes including relative heights. I seem to recall it didn't work in Prince (XHTML to PDF renderer), and it often had problems in Opera and ADE.

You are probably right in that according to the CSS spec, but I'm afraid renderers seem to consider themselves as "continuous" rather than "paged". Of course, I could be wrong, I may remember incorrectly or have made mistakes in my tests, but my conclusion was that I could not get it to work as expected.

gardefjord
05-31-2010, 06:01 AM
Well... I don't know of renderer that fails the example code, but from what I read in 10.1 Definition of "containing block" (http://www.w3.org/TR/CSS21/visudet.html#containing-block-details) from the CSS spec, the containing block of the root element seems to be precisely defined. For continuous media such as screen, the containing block is defined by viewport dimensions. The initial containing block is defined for box generated by "html" element, the "body" is contained within the box generated by "html" box.

Sounds well defined, and looks like non-standard behaviour, for renderers where initial screen height is unknown/undefined.

I would be grateful if you can name those renderers where a xhtml code segment would fail to produce the desired effect.

Ok, I've tried your code on Stanza for iPhone, Txtr for iPhone, ADE and iBooks on the iPad with almost the same results on every reader. The only one that stands out is Stanza which instead puts everything in the upper left corner.

I also tried it on the Bookeen and got the same result as on the iPad.

iPad
http://farm5.static.flickr.com/4011/4655819202_e33ec8a87d.jpg

Stanza (iPhone)
http://farm5.static.flickr.com/4061/4655199437_b3128e6eb6.jpg

ADE
http://farm5.static.flickr.com/4020/4655819144_38652159f6.jpg

NASCARaddicted
06-16-2010, 05:26 AM
I tried it with Ankhs code, on one line and it works great with calibre. Thanks

This should be made sticky on the top of the forum. Or it should be included in the epub code snippets thread.

Now, what I haven't tried so far (but will soon do) is: what is, when the line is longer then the screen?

kovidgoyal
06-16-2010, 10:41 AM
@Nascaraddicted: This and several other advanced techniques are demonstrated in the calibre epub demo (linked to in the epub section of the conversion section of the calibre user manual)