OK - last iteration, I promise!
(I use this as an excuse for getting out of chores - all y'all
NEED my advice
)
Using Sigil I was able to push the vh back to 100 by surrounding the author name with the div delineator. This works no-matter the height of the display window.
Make sure you only use this technique on its own html page...otherwise the div's will superimpose over your other text.
Code:
CSS:
body, p {text-align:center; font-family:serif; font-weight:bold;
text-indent:0; padding:0; margin:0}
h2.title {font-size:2.7em; text-transform:uppercase}
.auth {font-size:1.4em; font-variant:small-caps}
.sub {font-size:1.1em}
.pub {font-size:.8em}
.pub img {display:block; width:10%; margin:0 auto}
div[class^="v-"] {height:100vh; width:100vw; display:table; position:fixed}
div.v-top div {display:table-cell; vertical-align:top}
div.v-mid div {display:table-cell; vertical-align:middle}
div.v-btm div {display:table-cell; vertical-align:bottom}
Code:
HTML:
<body>
<div class="v-top">
<div>
<p class="auth">Thomas Perry</p>
</div>
</div>
<div class="v-mid">
<div>
<h2 class="title">Eddie's Boy</h2>
<p class="sub">A Novel</p>
</div>
</div>
<div class="v-btm">
<div>
<p class="pub"><img alt="" src="../Images/logo_MysteriousPress.png"/>
The Mysterious Press<br/>New York</p>
</div>
</div>
</body>
>=======<
You can also put the title/sub lines in the 'top' group:
Code:
HTML:
<body>
<div class="v-top">
<div>
<p class="auth">Thomas Perry</p>
<h2 class="title">Eddie's Boy</h2>
<p class="sub">A Novel</p>
</div>
</div>
<div class="v-btm">
<div>
<p class="pub"><img alt="" src="../Images/logo_MysteriousPress.png"/>
The Mysterious Press<br/>New York</p>
</div>
</div>
</body>
