How to center an image vertically

[gardefjord]

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.

[Jellby]

There is no reliable way to do it.

[Ankh]

Originally Posted by Jellby

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]

Originally Posted by Ankh

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]

Originally Posted by Jellby

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

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]

Originally Posted by Ankh

Well... I don't know of renderer that fails the example code, but from what I read in 10.1 Definition of "containing block" 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


Stanza (iPhone)


ADE

[NASCARaddicted]

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]

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

[Land_Outcast]

I'll try Ankhs' code,* but also, I found a nice simple way to center vertically and horizontally without SVG:

Essentially I create a div of the same size as the viewport (might need to reduce it to 95vh to avoid displacement caused by renderer's compulsory margins).

As of 2018, ADE still doesn't support vertical-align:middle.

  <!DOCTYPE html>
  <html>
  <head>
  <style>
  img {
      display: inline-block;
      vertical-align: middle;
      max-width: 100%;
      max-height: 100vh;
  }
  p.Vertical {
  text-align: center;
  line-height: 100vh;
  }
  div.Vertical {
  height:100vh;
  width:100vw;
  }
  body {margin: 0}
  </style>
  </head>

  <body>
  <div>
  <p class="ex">
  <img src="paris.jpg" alt="Paris">
  </p>
  </div>

  </body>

  </html>

*Actually, it´s no good for images which resize with the text, given that you can´t imput the "margin correction".

[Turtle91]

This has worked for me for several years. I wish I could remember who I got it from on the internetz...

I think it was Hitch that mentioned Kindle/Amazon doesn't like Tables, but I'm not sure if "doesn't like" equates to "doesn't work". I don't use Kindle - except to immediately convert it to ePub.

edit: The technique doesn't actually use "tables" it simply uses the properties of tables in the CSS for "display:table-cell".
You can have any number of items within the inner div and it'll vertically center on the page. Works great for title pages, dedications, Book/Part headings, etc.

Cheers,

<head>
  <title>Vertical Center</title>
  <style>
/* Vertically centered on page */
div.v-ctr     {height:100%; width:100%; display:table; position:fixed; padding:0; margin:0; text-indent:0}
div.v-ctr div {display:table-cell; vertical-align:middle; padding:0; margin:0}
</style>
</head>

<body>
  <div class="v-ctr">
    <div>
      <p>Centered</p>
    </div>
  </div>
</body>
</html>

[Hitch]

Originally Posted by Turtle91

This has worked for me for several years. I wish I could remember who I got it from on the internetz...

I think it was Hitch that mentioned Kindle/Amazon doesn't like Tables, but I'm not sure if "doesn't like" equates to "doesn't work". I don't use Kindle - except to immediately convert it to ePub.

Well, sheesh, Turtle, in what decade? At one point in time, around the genesis of this thread, it was "doesn't work." Later, it was "doesn't like" (and still doesn't, really), with them working on KF8, and spastically on KF7, and now, they work, except, if you have a long one, it kills Enhanced Typesetting. Aren'tcha glad you commented?

edit: The technique doesn't actually use "tables" it simply uses the properties of tables in the CSS for "display:table-cell".
You can have any number of items within the inner div and it'll vertically center on the page. Works great for title pages, dedications, Book/Part headings, etc.

Cheers,

<head>
  <title>Vertical Center</title>
  <style>
/* Vertically centered on page */
div.v-ctr     {height:100%; width:100%; display:table; position:fixed; padding:0; margin:0; text-indent:0}
div.v-ctr div {display:table-cell; vertical-align:middle; padding:0; margin:0}
</style>
</head>

<body>
  <div class="v-ctr">
    <div>
      <p>Centered</p>
    </div>
  </div>
</body>
</html>

We use this faux "qualities of tables" coding for a variety of things, and mostly, it works. I have some vague recollection of this not working that well, for vert. centering, but I'll have to investigate and remind myself of the what/why.

Hitch

[Turtle91]

Thanks Hitch - I'm starting to remember some of the things I think I forgot, maybe, I'm not sure...

[Land_Outcast]

And how would we center paragraph for reflowable ebook in ADE?
(Meaning we don't know its final height, and we can't use vertical-align.)
(And, remember, idpf won't allow for absolute positioning.)

[Turtle91]

The code I mentioned above works for me. However you need to use it properly....short paragraphs...typically only a line or two that you could actually discern as being v-centered - especially on a small screen. There is a difference between position:absolute and position:fixed.