How to center at bottom of screen?

foosion · 09-14-2024, 08:09 PM

I'd like to center a small picture and some text at the bottom of the screen. I can easily achieve bottom

Code:

div.fixed {
  position: fixed;
  bottom: 0;
}

but can't figure out how to center, other than guessing and playing with right and left (I don't know the size of the screen).

What's the best way?

enuddleyarbl · 09-14-2024, 08:35 PM

I know you're talking about an image, but I've used:

Code:

text-align: center;

and it centers images fine. Does it do what you need in your case?

foosion · 09-14-2024, 09:29 PM

Quote:

Originally Posted by enuddleyarbl

I know you're talking about an image, but I've used:

Code:

text-align: center;

and it centers images fine. Does it do what you need in your case?

That works fine normally, but hasn't worked for me together with position: fixed.

Code:

div.fixed {
  position: fixed;
  bottom: 0;
  text-align: center;
}

places things at the bottom but does not center. Text-align:center does work for both img and text, but it's the combination with fixed that's the issue.

EDIT: I can fake it with multiple fixed tags, the bottom line at 0, the next up at 1.2em, the next up at 2.4em, etc. I'm not sure if this is robust. Perhaps a table?

EDIT2: See my latest post. Not sure what I did wrong before.

Turtle91 · 09-14-2024, 10:16 PM

So, I've given a few examples on how to vertically center the text on the page (search the MR threads for a more in-depth discussion). Such techniques work fine and follow the ePub2 rules, but you may have issues with a particular brand of device (ePub on Kobo rings a bell). You can easily modify that technique to put it at the bottom using vertical-align:bottom.

If you are working on an ePub3 book, then it may be a little more elegant to use display:flex rather than the display:table technique.

Code:

CSS:
  div.v-btm     {height:100vh; width:100vw; display:table; position:fixed;
                 padding:0; margin:0; text-indent:0}
  div.v-btm div {display:table-cell; vertical-align:bottom}
  div.v-btm .ctr{text-align:center}

HTML:
<body>
<div class="v-btm">
  <div>
    <p>Text at the bottom of the page.</p>
    <p class="ctr">Text at the bottom of the page and centered.</p>
  </div>
</div>
</body>

Click image for larger version

Name: Screenshot 2024-09-14 221042.png
Views: 41
Size: 255.0 KB
ID: 210817

foosion · 09-15-2024, 07:46 AM

That isn't working. Text (or text and img) vanish -see screenshot. This worked:

Code:

img.logosize {
  height: 36px;
  width: 37px;
}
.btm-2 {
  position: fixed;
  bottom: 2.4em;
  width: 100%;
  text-align: center;
}
.btm-1 {
  position: fixed;
  bottom: 1.2em;
  width: 100%;
  text-align: center;
}
.btm {
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
}

I'm probably making some obvious mistake.

Turtle91 · 09-15-2024, 09:34 AM

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: 43
Size: 414.0 KB
ID: 210836

foosion · 09-15-2024, 09:54 AM

Quote:

Originally Posted by Turtle91

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.

I had set up the top portion as "normal" CSS, not fixed position. Why did you make the top fixed (necessary or preference)?

I tried surrounding the top portion with <div></div> (otherwise leaving what I had at top, with your bottom code), but that didn't help

I'm puzzled why my more manual version worked, but your code didn't.

Any idea why the logo and text vanish for me with your code?

I'm confused. I could well be making a stupid mistake, but I'm missing it.

Turtle91 · 09-15-2024, 10:01 AM

I didn't see what css you are using. I would imagine you have something in there that causes the bottom to push off the page.

I set the text you had at the top to be vertically centered just to show that you could have multiple sections with different vertical values. Aligned to the top is standard behavior so you shouldn't need to do anything special for that...again, it may be something in your css - large bottom margin perhaps??

foosion · 09-15-2024, 10:10 AM

Quote:

Originally Posted by Turtle91

I didn't see what css you are using. I would imagine you have something in there that causes the bottom to push off the page.

I set the text you had at the top to be vertically centered just to show that you could have multiple sections with different vertical values. Aligned to the top is standard behavior so you shouldn't need to do anything special for that...again, it may be something in your css - large bottom margin perhaps??

I posted the CSS for my version in #5 above, https://www.mobileread.com/forums/sh...86&postcount=5 This has the bottom stuff visible.

I used your CSS for the other version.

No bottom margin for the last line of top text or anything on the bottom portion.

We both use position:fixed, but I use bottom:0 (or :1.2em), while you use vertical-align:bottom. Perhaps that's the issue?

Turtle91 · 09-15-2024, 10:38 AM

I'm using display:table, so I can use display:table-cell....that allows for vertical alignment using vertical-align:middle/bottom.

Your css above didn't have the definitions for classes: Titlea and Titleb...but I think I found the problem.

I noticed I hadn't included the author name on my example so I added that... (see attached) it also shows that you can have stuff aligned at the top, middle, and bottom all on the same page.

Click image for larger version

Name: Screenshot 2024-09-15 104817.png
Views: 28
Size: 30.6 KB
ID: 210839

While making this example I remembered the discussion that we had on the other threads in MR about vertical centering that the rendering engine could calculate display space out of order... eg, it can report to the ePub that there are 1600 pixels available for viewing height (vh) but then reserve some of that space for headers/footers/inspector widgets/etc. If the ePub calculates the formatting based on the 1600 pixels then the bottom of the display can be covered with the widget/footer.

On this example I changed the vh to 95 (95% of viewable height) to account for any lost space due to the renderer mis-reporting. This will leave a little bit of space at the bottom, but should look fine.

Code:

CSS:

body, p  {text-align:center; font-family:serif; font-weight:bold;
          text-indent:0; padding:0; margin:0}

h2.title {font-size:1.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.v-ctr, div.v-btm {height:95vh; width:100vw; display:table; position:fixed}

div.v-ctr div {display:table-cell; vertical-align:middle}

div.v-btm div {display:table-cell; vertical-align:bottom}

Code:

HTML:
<body>
<p class="auth">Thomas Perry</p>

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

foosion · 09-15-2024, 10:41 AM

While I digest your post, here's the other CSS:

Code:

p.Sub {
  font-size: 1.5em;
  line-height: 1.2;
  margin: 0;
  text-align: center;
}
p.Titlea {
  font-size: 2em;
  text-align: center;
  text-indent: 0;
  line-height: 1.2em;
  margin: 0.5em 0 0 0;
}
p.Titleb {
  font-size: 1.75em;
  text-align: center;
  text-indent: 0;
  margin-top: 0.65em;
}

JSWolf · 09-15-2024, 10:54 AM

Quote:

Originally Posted by Turtle91

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>

Attachment 210836

Can you do this so the code works with both ePub2 and ePub3?

JSWolf · 09-15-2024, 10:56 AM

The way most title pages are done is to use a graphic image. Make it hi-resolution and you can have whatever at the top and whatever at the bottom and centered. The middle can also have whatever it is you want. The CCS and code to display a full page graphics is trivial.

Turtle91 · 09-15-2024, 11:09 AM

Quote:

Originally Posted by JSWolf

Can you do this so the code works with both ePub2 and ePub3?

This does work for both as long as the ePub2 supports display:table, which I'm pretty sure they all do. If it is an ePub3 only reader, then you could use display:flex for a cleaner, more elegant, solution.

Quote:

Originally Posted by JSWolf

The way most title pages are done is to use a graphic image. Make it hi-resolution and you can have whatever at the top and whatever at the bottom and centered. The middle can also have whatever it is you want. The CCS and code to display a full page graphics is trivial.

Yes, sometimes that is easier...especially if there are a lot of graphic elements on the title page. If there are only a few graphics, like a publisher logo, then it is cleaner to just use text and insert the image as we have here. It reduces the ePub file size without needing another hi-res image and the text itself will be very clean no matter the display size.

edit: corrected ePub3 to ePub2

JSWolf · 09-15-2024, 11:58 AM

Quote:

Originally Posted by Turtle91

This does work for both as long as the ePub2 supports display:table, which I'm pretty sure they all do. If it is an ePub3 only reader, then you could use display:flex for a cleaner, more elegant, solution.

Yes, sometimes that is easier...especially if there are a lot of graphic elements on the title page. If there are only a few graphics, like a publisher logo, then it is cleaner to just use text and insert the image as we have here. It reduces the ePub file size without needing another hi-res image and the text itself will be very clean no matter the display size.

edit: corrected ePub3 to ePub2

If this is for an eBook for sale, then you have to use what works for ePub2 and ePub3.

09-14-2024, 08:09 PM	#1
foosion Evangelist Posts: 413 Karma: 41524 Join Date: Sep 2011 Device: Kobo Libra 2 & Clara BW	How to center at bottom of screen? I'd like to center a small picture and some text at the bottom of the screen. I can easily achieve bottom Code: div.fixed { position: fixed; bottom: 0; } but can't figure out how to center, other than guessing and playing with right and left (I don't know the size of the screen). What's the best way?

09-14-2024, 08:35 PM	#2
enuddleyarbl Guru Posts: 746 Karma: 1077122 Join Date: Sep 2013 Device: Kobo Forma	I know you're talking about an image, but I've used: Code: text-align: center; and it centers images fine. Does it do what you need in your case?

09-14-2024, 10:16 PM	#4
Turtle91 A Hairy Wizard Posts: 3,213 Karma: 19000001 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	So, I've given a few examples on how to vertically center the text on the page (search the MR threads for a more in-depth discussion). Such techniques work fine and follow the ePub2 rules, but you may have issues with a particular brand of device (ePub on Kobo rings a bell). You can easily modify that technique to put it at the bottom using vertical-align:bottom. If you are working on an ePub3 book, then it may be a little more elegant to use display:flex rather than the display:table technique. Code: CSS: div.v-btm {height:100vh; width:100vw; display:table; position:fixed; padding:0; margin:0; text-indent:0} div.v-btm div {display:table-cell; vertical-align:bottom} div.v-btm .ctr{text-align:center} HTML: <body> <div class="v-btm"> <div> <p>Text at the bottom of the page.</p> <p class="ctr">Text at the bottom of the page and centered.</p> </div> </div> </body>

09-15-2024, 10:38 AM	#10
Turtle91 A Hairy Wizard Posts: 3,213 Karma: 19000001 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	I'm using display:table, so I can use display:table-cell....that allows for vertical alignment using vertical-align:middle/bottom. Your css above didn't have the definitions for classes: Titlea and Titleb...but I think I found the problem. I noticed I hadn't included the author name on my example so I added that... (see attached) it also shows that you can have stuff aligned at the top, middle, and bottom all on the same page. While making this example I remembered the discussion that we had on the other threads in MR about vertical centering that the rendering engine could calculate display space out of order... eg, it can report to the ePub that there are 1600 pixels available for viewing height (vh) but then reserve some of that space for headers/footers/inspector widgets/etc. If the ePub calculates the formatting based on the 1600 pixels then the bottom of the display can be covered with the widget/footer. On this example I changed the vh to 95 (95% of viewable height) to account for any lost space due to the renderer mis-reporting. This will leave a little bit of space at the bottom, but should look fine. Code: CSS: body, p {text-align:center; font-family:serif; font-weight:bold; text-indent:0; padding:0; margin:0} h2.title {font-size:1.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.v-ctr, div.v-btm {height:95vh; width:100vw; display:table; position:fixed} div.v-ctr div {display:table-cell; vertical-align:middle} div.v-btm div {display:table-cell; vertical-align:bottom} Code: HTML: <body> <p class="auth">Thomas Perry</p> <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> Last edited by Turtle91; 09-15-2024 at 10:50 AM.

09-15-2024, 10:56 AM	#13
JSWolf Resident Curmudgeon Posts: 76,063 Karma: 134368292 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	The way most title pages are done is to use a graphic image. Make it hi-resolution and you can have whatever at the top and whatever at the bottom and centered. The middle can also have whatever it is you want. The CCS and code to display a full page graphics is trivial. Last edited by JSWolf; 09-15-2024 at 11:01 AM.

09-15-2024, 07:46 AM	#5
foosion Evangelist Posts: 413 Karma: 41524 Join Date: Sep 2011 Device: Kobo Libra 2 & Clara BW	That isn't working. Text (or text and img) vanish -see screenshot. This worked: Code: img.logosize { height: 36px; width: 37px; } .btm-2 { position: fixed; bottom: 2.4em; width: 100%; text-align: center; } .btm-1 { position: fixed; bottom: 1.2em; width: 100%; text-align: center; } .btm { position: fixed; bottom: 0; width: 100%; text-align: center; } I'm probably making some obvious mistake. Attached Thumbnails Last edited by foosion; 09-15-2024 at 07:56 AM.

09-15-2024, 10:01 AM	#8
Turtle91 A Hairy Wizard Posts: 3,213 Karma: 19000001 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	I didn't see what css you are using. I would imagine you have something in there that causes the bottom to push off the page. I set the text you had at the top to be vertically centered just to show that you could have multiple sections with different vertical values. Aligned to the top is standard behavior so you shouldn't need to do anything special for that...again, it may be something in your css - large bottom margin perhaps??

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Screen shady bottom	emreceng	Onyx Boox	3	02-09-2020 01:15 PM
Aura HD Lines on bottom of screen	hf.tan	Kobo Reader	4	08-28-2014 08:02 PM
Page numbers at bottom of screen	Waylander	Sony Reader	1	10-18-2013 02:21 PM
Circled M or S at the bottom of the screen	Larken	Sony Reader	4	12-18-2009 03:15 PM
Black line 3½ cm from bottom of screen	Moonraker	iRex	6	08-20-2006 11:19 AM