View Single Post
Old 05-12-2024, 06:27 AM   #6
repilo
Connoisseur
repilo has become one with the cosmosrepilo has become one with the cosmosrepilo has become one with the cosmosrepilo has become one with the cosmosrepilo has become one with the cosmosrepilo has become one with the cosmosrepilo has become one with the cosmosrepilo has become one with the cosmosrepilo has become one with the cosmosrepilo has become one with the cosmosrepilo has become one with the cosmos
 
Posts: 97
Karma: 21870
Join Date: Apr 2021
Location: Spain
Device: Kobo Libra 2
Quote:
Originally Posted by Turtle91 View Post
I just used a basic text-align:center

Code:
.ctr {text-align:center}
Unfortunately, it doesn't work well on my Kobo Libra 2. The vertical centering is correct, but it doesn't do the horizontal centering well: the paragraph is centered but a bit shifted to the right.
I have found another way that does work:

Code:
html, body { height:100%; margin:0; } /* required */
div.centerVpag { display:table; height:100%; width:100%; text-indent:0;
	text-align:center; }
.centerVrow { display:table-row; }
.centerVcell { display:table-cell; vertical-align:middle;
	text-align:center; text-indent:0; }

  <div class="centerVpag">
    <div class="centerVrow">
      <p class="centerVcell">TEXT CENTERED VERTICALLY AND HORIZONTALLY</p>
    </div>
  </div>
What I least understand is why it is necessary:
html, body { height:100%; margin:0; }
Which I don't like having to apply to the whole epub just to make a little vertically centered text look good.
repilo is offline   Reply With Quote