Today, 08:09 PM | #1 |
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; } What's the best way? |
Today, 08:35 PM | #2 |
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; |
Today, 09:29 PM | #3 | |
Addict
Posts: 303
Karma: 36772
Join Date: Sep 2011
Device: Kobo Libra 2 & Clara BW
|
Quote:
Code:
div.fixed { position: fixed; bottom: 0; text-align: center; } 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? Last edited by foosion; Today at 09:50 PM. |
|
Today, 10:16 PM | #4 |
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 |