View Single Post
Old 09-15-2024, 09:34 AM   #6
Turtle91
A Hairy Wizard
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
Posts: 3,363
Karma: 20212733
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
The technique I gave seems to work fine for me (see attached).

You didn't mention that you wanted two different placements, a top and bottom. In that case you need to make sure you delineate the different sections...I use a div on the attachment to place one section vertically centered, and the other vertical at the bottom.

Using margin:0 auto can sometimes help when centering an image.

Code:
CSS:
body       {text-align:center; font-family:serif; text-indent:0; padding:0; margin:0}
h2.title   {font-size:1.7em; margin-top:0; text-transform:uppercase}
  .sub     {font-weight:bold; font-size:1.1em; }

  .pub     {font-size:.8em}
  .pub img {display:block; width:10%; margin:0 auto}


div.v-ctr, div.v-btm {height:100vh; width:100vw; display:table; position:fixed}

   /* Vertically centered on page */
div.v-ctr div {display:table-cell; vertical-align:middle}

   /* Vertically bottom of page */
div.v-btm div {display:table-cell; vertical-align:bottom}
Code:
HTML:
<body>
<div class="v-ctr">
  <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>
Click image for larger version

Name:	Screenshot 2024-09-15 092340.png
Views:	422
Size:	414.0 KB
ID:	210836

Last edited by Turtle91; 09-15-2024 at 09:47 AM.
Turtle91 is offline   Reply With Quote