[RbnJrg]

Originally Posted by foosion

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

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?

Hi;

If you want to center (text or images) by using the property "position: fixed", you need to use the following code:


1) In your xhtml file:

  <p class="fixedTop">Hello!!</p>

  <div class="fixedBottom">
    <img class="myImg" alt="epub" src="../Images/epub.png"/>
  </div>

2) In your .css file:

body {
  margin: 0;
}

.fixedTop {
  position: fixed;
  top: 0;
  width: 100%; /* This is key */
/* The following properties are for centering (text or images) */
  margin: 0;
  text-indent: 0;
  text-align: center;
}

.fixedBottom {
  position: fixed;
  bottom: 0;
  width: 100%; /* This is key */
/* The following properties are for centering (text or images) */
  margin: 0;
  text-indent: 0;
  text-align: center;
}

.myImg {
  width: 20%; /* Or the width you wish */
}

However, not all epub2 ereaders will honor the property "position: fixed". So, if you plan to make your epub only for epub2, then you should use a table; on the other hand, if you plan to make your epub for epub3, then you should use the property "display: flex" to do what you want to get.

Regards