Quote:
Originally Posted by mrmikel
Vertical centering is not so easy to do, especially if someone changes the font size. A consistent amount from the top might be most easily achievable.
One to a page has my vote, too, especially since poetry books are seldom very long. A playground to work with different indents, line spacing, etc, too.
|
Hi mrmikel;
Vertical centering is not so difficult as it seems. Try this code:
Code:
div#container {
display: table;
width: 500px;
height: 700px;
margin: 0 auto;
padding: 18px;
border: 5px solid red; /* Only to see the "table" */
}
div#content {
display: table-cell;
width: 100%;
height: 100%;
vertical-align: middle;
font-size: 1.0em;
text-align: left; /* for poetry */
padding: 0 36px; /* not neccesary, just to see the text better */
border: 5px solid black; /* Only to see the vertical align */
}
The "border" properties are not neccesary; I just included them in order that the centering it shows better. In order that the font-size doesn't affect the centering, margins and paddings (if any) must be in PIXELS.
The output is something like the following picture (from my K4NT):
https://www.mobileread.com/forums/att...9&d=1368923758
The key is to use two "divs", one as "table" and the other as a "table-cell". After that, you can use the property "vertical-align" that makes all the work
