How to center at bottom of screen?

foosion · Yesterday, 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 · Yesterday, 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 · Yesterday, 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 · Yesterday, 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: 13
Size: 255.0 KB
ID: 210817

foosion · Today, 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 · Today, 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: 3
Size: 414.0 KB
ID: 210836

foosion · Today, 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 · Today, 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 · Today, 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?

Yesterday, 08:09 PM	#1
foosion Addict Posts: 307 Karma: 36772 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?

Yesterday, 08:35 PM	#2
enuddleyarbl Guru Posts: 743 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?

Yesterday, 10:16 PM	#4
Turtle91 A Hairy Wizard Posts: 3,170 Karma: 18843349 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>

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

Today, 07:46 AM	#5
foosion Addict Posts: 307 Karma: 36772 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; Today at 07:56 AM.

Today, 10:01 AM	#8
Turtle91 A Hairy Wizard Posts: 3,170 Karma: 18843349 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??