How to center at bottom of screen?

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

Turtle91 · Today, 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>

Today, 08:09 PM	#1
foosion Addict Posts: 303 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?

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

Today, 10:16 PM	#4
Turtle91 A Hairy Wizard Posts: 3,168 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

Advert