css for horizontal and vertically centred

lucie · 05-09-2024, 06:45 AM

Hi, Im new to Sigil and the book author would like quotes that come before a chapter to be centred and standalone (in their own file/page)

I'm having trouble getting the css to work for this, other than just 50% of the page.

Any help you can offer gratefully received

Turtle91 · 05-09-2024, 09:56 AM

Hi Lucie - welcome to MR!

The easiest way to make sure it is on it's own page is to put it in its own html file. Each chapter should be in a separate file and you can just place the quote file before the chapter file.

Are you using ePub2 or ePub3?? There are different techniques for the different versions.

For ePub2, I borrow some <table> properties without having to use a table. It works great on my devices but I can't guarantee all devices support <table>s, although, it would be a pretty poor device/app that didn't... What device/app are you targeting for your book?

In my case (ePub2) I surround whatever I want to be vertically centered with a double <div>. You can style the interior paragraphs however you like... ie. horizontally centered. You can see a better explanation on W3Schools website. They are a pretty decent resource for coding specifics.

Code:

CSS:
/* Vertically centered on page */
div.v-ctr      {height:100%; width:100%; display:table; position:fixed; 
                padding:0; margin:0; text-indent:0}

div.v-ctr div {display:table-cell; vertical-align:middle; 
                padding:0; margin:0}


HTML:
<body>
  <div class="v-ctr">
    <div>
      <p>yadda yadda yadda</p>
    </div>
  </div>
</body>

You can actually use the same technique for ePub3, but there are some more elegant solutions using display:flex... be aware that many, especially older, devices won't support ePub3 coding.

Cheers!

Turtle91 · 05-09-2024, 10:23 AM

In Sigil I have set up a 'clip' to place the surrounding <div>s...so all I have to do is highlight whatever section I want vertically centered...then click on the clip. For more info, take a look in the "Clips" section of the Sigil Users Guide.

Code:

Clip:

Name:    Text:
V-Ctr    <div class="v-ctr">\n<div>\n\1\n</div>\n</div>

repilo · 05-11-2024, 04:02 PM

Quote:

Originally Posted by Turtle91

Hi Lucie - welcome to MR!
Cheers!

Can you share the css of the ctr class for horizontal centering, please?

Turtle91 · 05-11-2024, 10:50 PM

I just used a basic text-align:center

Code:

.ctr {text-align:center}

repilo · 05-12-2024, 07:27 AM

Quote:

Originally Posted by Turtle91

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.

sunflower36002 · 05-12-2024, 08:43 AM

Create CSS File: Make a CSS file named quotes.css.

Define Styles: In quotes.css, style quotes with:

css
Copy code
blockquote {
text-align: center;
}
blockquote p {
font-style: italic;
font-size: 1.2em;
}
Link CSS: Add quotes.css to your Sigil document via "Tools" > "Add Semantics" > "External CSS".

Insert Quotes: Use <blockquote> HTML tag for quotes.

Export: Quotes should now appear centered and standalone on their own page when you export your Sigil document.

Turtle91 · 05-12-2024, 10:24 AM

Quote:

Originally Posted by repilo

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.

The horizontal alignment has nothing to do with the technique provided. As you said, the vertical centering works fine.

For horizontal centering, the techniques are the same as any other text. You need to make sure you have nothing else adjusting the letters to the right… such as text-indent or maybe a margin/padding.

That is why I included:
margin:0;
padding:0;
text-indent:0;

Another, less common, culprit is letter-spacing; that places extra spacing to the left of each letter, including the first.

Definitely do NOT try to use this in the same html file as other, non-centered, text. It will float over the top of the other text. Make sure it is in its own html file.

Edit:
Sorry I didn't show the CSS in the image attachment above. Here it is. Also... Make sure you are not applying other css to the file...either check with Sigil's built-in css inspector in the Preview Window to see if something else is being applied to your page
- OR -
just don't link a css sheet and place the css in the <style> section of the header...as shown in attached image.

Another culprit to check is if the Kobo Libra is adding a text-indent because of user settings in the Kobo itself?? If this is the case, you may want to add !important after the text-indent. Not sure it will work if Kobo is forcing it's own settings over the css???

text-indent:0 !important

theducks · 05-12-2024, 11:56 AM

Centering works fin on a Libra2.

You just need to also define anything else you do not wish it inherit.

Code:

text-align: center;
text-indent: 0;

I can't count how many books that center 1 line things WITH a non-zero text-indent also.

As you noted, it looks real crappy next to a true center

repilo · 05-12-2024, 02:12 PM

Quote:

Originally Posted by Turtle91

For horizontal centering, the techniques are the same as any other text. You need to make sure you have nothing else adjusting the letters to the right… such as text-indent or maybe a margin/padding.
[...]
Another culprit to check is if the Kobo Libra is adding a text-indent because of user settings in the Kobo itself??

I can't figure out what my Kobo reader is doing in the background. You can see below in my full code that I don't do anything other than what you suggest.

Quote:

Originally Posted by theducks

Centering works fin on a Libra2.

In general it does, but in this particular case you can see that it doesn't.

In summary, everything seems to work in Sigil's viewer and in Calibre's epub viewer. The problem is that on the Kobo Libra 2 this vertical alignment does not work at all in epub format (the text is stuck to the top edge of the screen), although it does work partially in kepub format: the vertical alignment is correct, but the horizontal alignment is somewhat shifted to the right.
This is the complete code I used. In Sigil it looks fine, but not in Kobo Libra 2 (converted to kepub with Calibre):

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style>
div.v-ctr { display:table; height:100%; width:100%; position:fixed; 
	padding:0; margin:0; text-indent:0 !important; }

div.v-ctr div { display:table-cell; vertical-align:middle; 
	padding:0; margin:0; text-indent:0 !important; }

.ctr { text-align:center !important; }
</style>
</head>

<body>
  <div class="v-ctr">
    <div>
      <p>VERTICALLY CENTERED</p>

      <p class="ctr">HORIZONTALLY CENTERED</p>
    </div>
  </div>
</body>
</html>

Notice in the attached screenshot that the “VERTICALLY CENTERED” paragraph does not start at zero.

repilo · 05-12-2024, 02:19 PM

I have just solved the riddle. It's all because I have a margin selected in the menu called “Aa”. If I select margins = 0 the centering is perfect.
However, this is a Kobo defect, because it's legitimate to adjust this menu to the user's taste, and it shouldn't cause any problems, as it doesn't affect the centering of any other text.

theducks · 05-12-2024, 04:27 PM

Even with Use Publishers Styles set. those (device) settings can interact.
And each brand behaves differently
At least my 2 Kobo's behave the same

JSWolf · 05-12-2024, 08:17 PM

Quote:

Originally Posted by Turtle91

I just used a basic text-align:center

Code:

.ctr {text-align:center}

If <p> has an indent then your center will be off-center..

Code:

.ctr {
  text-align:center
  text-indent: 0;
}

Turtle91 · 05-12-2024, 11:54 PM

Quote:

Originally Posted by repilo

I have just solved the riddle. It's all because I have a margin selected in the menu called “Aa”. If I select margins = 0 the centering is perfect.
However, this is a Kobo defect, because it's legitimate to adjust this menu to the user's taste, and it shouldn't cause any problems, as it doesn't affect the centering of any other text.

There isn't much anyone can do with CSS if the device/app ignores the ePub's css...

You could try using the !important property and/or enable Use Publisher's Styles, as theDucks mentioned, if it is available for your device.

I was playing around with this and you could try the following:

Click image for larger version

Name: Screenshot 2024-05-12 224409.png
Views: 126
Size: 175.1 KB
ID: 208245

If you use vh/vw instead of % in the height/width properties, then you don't need the position:fixed. However, I'm not sure how many devices support vh/vw ???

Click image for larger version

Name: Screenshot 2024-05-12 224451.png
Views: 121
Size: 186.0 KB
ID: 208244

repilo · 05-14-2024, 05:05 AM

The same occurs with 100vh/100vw.
The problem comes from the side margin setting in the Aa menu of the ereader. I like to have a white margin of about 1 cm on each side, and that setting messes up the centering with this trick.
Fortunately this margin setting does not cause any problems with the centering of other text, tables, images, etc. that I have used so far. It seems that Kobo has not taken into account this trick from Turtle91.
Surely Kobo won't fix it, like so many other things.

05-09-2024, 06:45 AM	#1
lucie Member Posts: 13 Karma: 10 Join Date: May 2024 Device: none	css for horizontal and vertically centred Hi, Im new to Sigil and the book author would like quotes that come before a chapter to be centred and standalone (in their own file/page) I'm having trouble getting the css to work for this, other than just 50% of the page. Any help you can offer gratefully received

05-09-2024, 09:56 AM	#2
Turtle91 A Hairy Wizard Posts: 3,225 Karma: 19000635 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	Hi Lucie - welcome to MR! The easiest way to make sure it is on it's own page is to put it in its own html file. Each chapter should be in a separate file and you can just place the quote file before the chapter file. Are you using ePub2 or ePub3?? There are different techniques for the different versions. For ePub2, I borrow some <table> properties without having to use a table. It works great on my devices but I can't guarantee all devices support <table>s, although, it would be a pretty poor device/app that didn't... What device/app are you targeting for your book? In my case (ePub2) I surround whatever I want to be vertically centered with a double <div>. You can style the interior paragraphs however you like... ie. horizontally centered. You can see a better explanation on W3Schools website. They are a pretty decent resource for coding specifics. Code: CSS: /* Vertically centered on page / div.v-ctr {height:100%; width:100%; display:table; position:fixed; padding:0; margin:0; text-indent:0} div.v-ctr div {display:table-cell; vertical-align:middle; padding:0; margin:0} HTML: <body> <div class="v-ctr"> <div> <p>yadda yadda yadda</p> </div> </div> </body> You can actually use the same technique for ePub3, but there are some more elegant solutions using display:flex... be aware that many, especially older, devices won't support ePub3 coding. Cheers! Attached Thumbnails Last edited by Turtle91; 05-09-2024 at 10:12 AM.*

05-09-2024, 10:23 AM	#3
Turtle91 A Hairy Wizard Posts: 3,225 Karma: 19000635 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	In Sigil I have set up a 'clip' to place the surrounding <div>s...so all I have to do is highlight whatever section I want vertically centered...then click on the clip. For more info, take a look in the "Clips" section of the Sigil Users Guide. Code: Clip: Name: Text: V-Ctr <div class="v-ctr">\n<div>\n\1\n</div>\n</div>

05-11-2024, 10:50 PM	#5
Turtle91 A Hairy Wizard Posts: 3,225 Karma: 19000635 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 just used a basic text-align:center Code: .ctr {text-align:center}

05-12-2024, 11:56 AM	#9
theducks Well trained by Cats Posts: 30,452 Karma: 58055868 Join Date: Aug 2009 Location: The Central Coast of California Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A	Centering works fin on a Libra2. You just need to also define anything else you do not wish it inherit. Code: text-align: center; text-indent: 0; I can't count how many books that center 1 line things WITH a non-zero text-indent also. As you noted, it looks real crappy next to a true center Last edited by theducks; 05-12-2024 at 11:58 AM. Reason: double word fixed

05-12-2024, 08:43 AM	#7
sunflower36002 Junior Member Posts: 3 Karma: 10 Join Date: May 2024 Device: none	Create CSS File: Make a CSS file named quotes.css. Define Styles: In quotes.css, style quotes with: css Copy code blockquote { text-align: center; } blockquote p { font-style: italic; font-size: 1.2em; } Link CSS: Add quotes.css to your Sigil document via "Tools" > "Add Semantics" > "External CSS". Insert Quotes: Use <blockquote> HTML tag for quotes. Export: Quotes should now appear centered and standalone on their own page when you export your Sigil document.

05-12-2024, 02:19 PM	#11
repilo Connoisseur Posts: 68 Karma: 10 Join Date: Apr 2021 Location: Spain Device: Kobo Libra 2	I have just solved the riddle. It's all because I have a margin selected in the menu called “Aa”. If I select margins = 0 the centering is perfect. However, this is a Kobo defect, because it's legitimate to adjust this menu to the user's taste, and it shouldn't cause any problems, as it doesn't affect the centering of any other text.

05-12-2024, 04:27 PM	#12
theducks Well trained by Cats Posts: 30,452 Karma: 58055868 Join Date: Aug 2009 Location: The Central Coast of California Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A	Even with Use Publishers Styles set. those (device) settings can interact. And each brand behaves differently At least my 2 Kobo's behave the same

05-14-2024, 05:05 AM	#15
repilo Connoisseur Posts: 68 Karma: 10 Join Date: Apr 2021 Location: Spain Device: Kobo Libra 2	The same occurs with 100vh/100vw. The problem comes from the side margin setting in the Aa menu of the ereader. I like to have a white margin of about 1 cm on each side, and that setting messes up the centering with this trick. Fortunately this margin setting does not cause any problems with the centering of other text, tables, images, etc. that I have used so far. It seems that Kobo has not taken into account this trick from Turtle91. Surely Kobo won't fix it, like so many other things.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Centred and scaled image not centred or scaled	AlanHK	Kindle Formats	12	08-05-2020 01:35 PM
correct interpretation of <br> with centred text	cybmole	Sigil	23	08-16-2014 11:55 AM
Authors vertically	jfbok	Library Management	4	05-30-2012 01:31 PM
Can you center vertically?	bfollowell	ePub	10	07-07-2011 04:19 AM
last line in each paragraph centred	scgf	Calibre	9	09-10-2008 03:23 PM

Advert

Advert