Quote:
Originally Posted by Le_Sparte
Well, everything went fine. I'm ok with my styling (no vertical-align for my title, but there's no way to do it, right?).
|
Vertical align for a title can also be accomplished with a little help from our friend....the table...or more accurately the display:table property. Unfortunately, some of the older devices may not display tables properly, but with this technique they SHOULD degrade gracefully (display at the top of the page).
The following will center vertically on your screen then you just text-align:center to get it in the middle:
CSS:
div.v-ctr {height:100%; width:100%; display:table; position:fixed}
div.v-ctr div{display:table-cell; vertical-align:middle}
p.ctr {text-align:center; text-indent:0}
HTML:
<div class="v-ctr">
<div>
<p class="ctr">Title of Your Book</p>
<p class="ctr">by</p>
<p class="ctr">Little Ol' Me</p>
</div>
</div>
Cheers!