View Full Version : Can you center vertically?


bfollowell
06-30-2011, 10:22 PM
I know how to center text/images/etc. horizontally. Is there any way to center say a title page image vertically on the screen?

Thanks.

- Byron

Adjust
07-01-2011, 12:27 AM
Make the image the size of the Screen.
e.g. iBook for iPad the images size need to be 600x860pixels. This will fill up the screen.

I guess you could have something like making the image sit at a drop of 50%.

p.chapterhead {
margin-top: 50%;
}

<p class="chapterhead"><img src="images/Contents.png" alt="contents.png"/></p>

Jellby
07-01-2011, 04:11 AM
Make the image the size of the Screen.
e.g. iBook for iPad the images size need to be 600x860pixels. This will fill up the screen.

And it won't work when you change the orientation or use a different device.

I guess you could have something like making the image sit at a drop of 50%.

p.chapterhead {
margin-top: 50%;
}

<p class="chapterhead"><img src="images/Contents.png" alt="contents.png"/></p>

Unfortunately, percent values in top/bottom margins are (or should be) interpreted relative to the width of the container element, not the height.

I'm afraid there is no robust, compliant way of positioning elements vertically in the screen...

bfollowell
07-01-2011, 05:40 AM
I'm afraid there is no robust, compliant way of positioning elements vertically in the screen...

I had a feeling that was the case. I was just hoping someone may've known of some obscure element I was missing.

Thanks anyway guys.

- Byron

Adjust
07-01-2011, 07:48 AM
And it won't work when you change the orientation or use a different device.


What if you made the image 600x860 and then set the height to 100%.
Wouldn't that resize itself to whatever screen size or orientation?

bfollowell
07-01-2011, 01:41 PM
What if you made the image 600x860 and then set the height to 100%.
Wouldn't that resize itself to whatever screen size or orientation?

I'm not certain that would help. Ultimately, these epubs will be converted to mobi for use on a Kindle. Kindle's resolution for in-book images (anything but the cover) is 520x622. The particular image I have in mind is just a little wider than that aspect ratio, so if it stretches or shrinks to fit the screen, there will always be a little extra white space at the bottom. That's why I was hoping there was a way to center vertically.

Probably what I need to do is paste my image into another "template" that's the size of my screen, with the correct aspect ratio, and use my photo-editing software to center it vertically. I was just hoping there was an easy way to do that with html rather than editing the image.

Thanks again for the assistance guys.

- Byron

Jellby
07-02-2011, 04:30 AM
What if you made the image 600x860 and then set the height to 100%.
Wouldn't that resize itself to whatever screen size or orientation?

If it worked, it would be less than optimal, since it wouldn't take the whole width.

But the problem, in my experience, is that it is not clear what "height: 100%" means. We would like it to be "the whole usable screen height", but in the ePUB format (and in the way it is interpreted by the reading software) this is not the case, there is no concept of "screen", and it rather refers to the height of the containing element, which is often not defined. Say you have something like:

<html>
<body>
<div><img src="cover.jpg" alt=""/></div>
</body>
</html>

... and you say in CSS "img {height: 100%}". That means the img's height will be the same as the div's, but what is the div's height? It's the height needed to contain the img :blink:. Then you say "div {height: 100%}". Now the div's height is defined, it's the same as the body's. Same problem. So you say "body {height: 100%}", and then "html {height: 100%}", and expect it to mean "the same as the usable screen space". But I don't see anything in the spec saying that this is so, and even if there were, it is not something that is widely supported/implemented. It may work in some reader, it may break uglily in some other.

virtual_ink
07-04-2011, 03:28 AM
I know how to center text/images/etc. horizontally. Is there any way to center say a title page image vertically on the screen?

Thanks.

- Byron

Hi Byron, could you please help me with some tips for center alignment over here: http://www.mobileread.com/forums/showthread.php?t=141545 - would be mucho appreciated!!

ghostyjack
07-06-2011, 07:48 AM
This question was asked some time ago and someone wrote a bit of code that sort of fixes this for text, not tried it for pictures though.

<body>
<div class="wedge"></div>

<div class="container">
<table>
<tr>
<td>
<p>Bull's eye!</p>
</td>
</tr>
</table>
</div>
</body>

With a separate CSS file for it being:
html, body {height:100%; margin:0; padding:0; font-style: italic;}
.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;}

I use this for a page that has a dedication on it.

The author of the code said it's a bit rought-and-ready, but it did seem to work for me.

Jellby
07-06-2011, 09:38 AM
html, body {height:100%; margin:0; padding:0; font-style: italic;}
.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;}

That's (the red parts) what I mentioned, it's not clear at all to me that it must work as intended (i.e., I don't see the spec is clear in this point). It may work in some readers/systems, though.

ghostyjack
07-07-2011, 03:19 AM
Hell if I know Jellby, but it works for me to centre a line or two of text slap-bang in the middle of a page both virtically and horizontally on every single reading device and software I've tried it on (except for v2 of Aldiko, Coolreader and FBReader).

As long as it works, I'm not worrying about it, just waiting until a better way comes about.